position语法: 


position : static absolute relative 


position参数:


static :  无特殊定位,对象遵循HTML定位规则


absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框


relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置


position说明:


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


绝对定位position用于定位盒子对象,有时一个布局中几个小对象,不易用css padding、css margin进行相对定位,这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局,这个时候我们使用position绝对定位非常方便布局对象。


绝对定位position示范适用图、不规律布局,为即可利用position:absolute;position:relative进行绝对定位


绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。


position:absolute;position: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(上)也是在一个对象只能选一种定义



看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于CSS中 position绝对定位absolute relative的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
实用CSS3属性之 :target伪类实现Tab切换效果
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信