position：relative定位的特性

时间 2019-11-21

原文原文链接

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

一、与absolute的关系：限制绝对定位：布局

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

<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时，htm

<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属性；it

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

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

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

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

因为relative会影响元素的层级，因此在网页中，尽可能减小relative的使用；
拖拽