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的使用；
拖拽