position：relative定位的特性

最新推荐文章于 2022-04-08 20:24:47 发布

weixin_34240520

最新推荐文章于 2022-04-08 20:24:47 发布

阅读量241

点赞数

原文链接：https://my.oschina.net/hyzccc/blog/664787

版权

为什么80%的码农都做不了架构师？>>>

position：relative指的是相对自身进行定位；下面整理一下relative元素的几大特性：

1、与absolute的关系：限制绝对定位：

a、限制absolute的right/left/bottom/top定位；如给div设置为absolute时

<body>
<div style="left: 100px;top: 100px;"><!-- relative对absolute的定位限制作用 -->；
        <div style="position: absolute;left: 0px;top: 0px;">hello world</div>
</div> 
</body>

表现为正常的absolute属性，当添加了position:relative时，

<body>
<div style="left: 100px;top: 100px;position:relative">
        <div style="position: absolute;left: 0px;top: 0px;">hello world</div>
</div> 
</body>

div表现为div在父元素的div中，也就是限制了absolute属性；

b、限制z-index属性；加了relative后，元素的层级根据祖先元素的z-index决定；

c、限制元素在overflow下的表现：当加了relative后，设置了absolute的元素变得不可见；overflow:hidden属性会起作用；

<div style="overflow: hidden;position: relative;">
        <div style="position: absolute;overflow: hidden;">houok</div>relative对absolute的overflow有影响
    </div>

relative的特性：相对自身进行定位，不影响其他元素的布局；而利用margin值定位会影响其他元素的定位；z-index:auto不会限制其内部absolute的层级；该特性可以用于自定义拖拽；

由于relative会影响元素的层级，所以在网页中，尽量减少relative的使用；

转载于:https://my.oschina.net/hyzccc/blog/664787