css中relative使⽤
在css中有⼀个具有强⼤能⼒的定位，那就是css属性absolute，为了让其达到我们预想的那样，我们需要对absolute进⾏限制，今天就谈谈相对定位relative。
1.对top/left/right/bottom的限制定位。
css规范说，absolute相对定位的是他的最近祖先元素，当没有relative的时候，⾃然以html为祖先元素，定位top/left之类的相对html进⾏定位，⽽当⽗级元素设置relative的时候，⼦元素就会被包裹在⽗级节点内。
2.限制层级。
css固定定位(1)当未设置z-index的时候，元素层级是根据dom节点的顺序来排列的，后⾯覆盖前⾯。
(2)当absolute存在的时候，⽗级⽆relative的时候，根据absolute设置的z-index来分层，z-index⼤的在上⾯。
(3)⽗级为relative的时候，并且z-index为auto即不设置，内容是absolute，内容的层级是和⼦元素的z-index有关。
(4)当⽗级为relative的时候，并且z-index不为auto的时候，内容设置absolute属性，此时⼦元素设置z-index⽆效，是根据⽗元素的z-index属性来确定层级的。
3.让absolute在overflow下不固定
absolute在overflow:hidden中，是不会根据⿏标的滑轮滑动来更改位置的，⽽当对拥有absolute的⼦元素给他的⽗元素添加position:relative 的话，此时absolute将不在矫情，跟着滑轮⾛了。
4.占据原来位置
当对有relative属性的元素添加top:30px，本⾝将会上移30px,⽽下⾯的元素不会跟着向上移动30px，⽽是把30px给空出来，这就是relative的不脱离⽂档流，并且占据位置。当设置margin-top的时候，下⾯元素会跟上去。
个⼈见解，欢迎指正。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。