首 页 10元vpsVultr搬瓦工vps主机商建站程序网站教程国外域名IT资讯

CSS position绝对定位absolute relative

时间:2020-12-26  来源:  作者: 我要纠错


一、position语法与结构
position语法: 

position : static absolute relative 

position参数:
static :  无特殊定位,对象遵循HTML定位规则
absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

position说明:
设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确。

二、绝对定位使用条件
position:absoluteposition:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。

.divcss5{position:relative} 定义,通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px

.divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

 

对应HTML结构
<div class="divcss5">
    <div class="divcss5-a"></div>
</div>

这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。

注意的是,left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。

无相关信息
主机资讯
主机信息
WooCommerce商店
WooCommerce商店
osCommerce电子商务平台
osCommerce电子商务平台
PrestaShop商店
PrestaShop商店
又拍云
又拍云
discourse
discourse
Flarum
Flarum
MyBB
MyBB
v.ps
v.ps
Copyright © 2024 ushost.cn Inc. All Rights Reserved. 美国主机中文网 版权所有
鄂ICP备06013414号-8