position absolute
- position absolute,不设置lrtb(left, right, top, bottom)时,元素脱标,位置不变,但是实际浮动在此位置上,不占位置,并且浮动于普通流之上,需要通过z-index设置为负数浮在标准流(普通流)之下。
- 设置lrtb时,若没有父元素有定位,则相对于窗口(相对于页面的)进行定位,若存在父元素定位(relative, fixed, absolute),则子元素是相对于父元素定位。
- 若有两个子元素有定位,并且设置了lrtb,则后来者居上!
- 上述情况如果不写top,距离顶部还是元素之前的位置;
- 设置此属性的元素宽高属性会生效;
position relative
- 只设置position:relative 时,元素还是在当前位置,并且不会脱离标准流,一旦元素设置了此属性,则层级高于标准流,可以通过z-index设置层级高低;·
- 设置lrtb后,若父元素无定位元素,则相对于原来的位置定位,有可能产生溢出,因为元素不脱标,父元素定位到哪,子元素也会定位到哪;
- 如果是行内元素,使用该属性,宽高是不生效的;
定位相碰
- 子绝父定位,但通常都是子绝父相;逐层往上查找,找到定位的父元素,若查找到根元素都无父元素定位,则相对于窗口进行定位;
position fixed
- 设置了该属性的元素都是相对于视口定位(不会根据父元素进行定位);根据视口位置固定,并且它会使元素脱离标准流;
- 设置此属性的元素宽高会生效;
使用该属性会出现的bug以及解决方法:
问题(一):
红色条为固定定位的元素,蓝色区域滚不下去,有一部分被遮住了;
解决: 使用margin-bottom作用到蓝色元素上,高度为红色条的高度即可;若固定在顶部,则同理;
问题(二):滚动元素position:absolute时,要设置z-index: -1;防止滚动元素将固定元素覆盖(因为上文所说的同为脱标元素,后来者会居上)
position static
- 设置元素的此属性与不设是一样的,一般配合js来取消定位;
透彻研究定位隐藏的秘密
- 同时设置lrtb时,只有left 和 top起作用;如果同时设置了四个值,但需要right 或者bottom 起作用,则需要将left 或者top值设为auto;
- 若lrbt都为auto时,相当于没有设置;
- margin-left 和 left 会叠加。
- 如果需要fixed是相对于其父元素固定定位,则不要设置lrbt这几个值,
- 一般情况都会将absolute 放入relative父元素中,相对于其父元素进行变动;