CSS常见问题及解决(五) position定位中的absolute

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baizaozao/article/details/79643390

参考资料:https://www.jianshu.com/p/a3da5e27d22b

两个结论

absolute不一定要与relative同时出现

  • 当没有设置父元素或者某个祖先元素为relative时,absolute的 left,right,top,bottom属性是相对于body而言的
  • 当设置父元素或者爷爷元素,为relative时,absolute的 left,right,top,bottom属性是相对于这个relative元素而言的
  • 不管是否设置relative,改absolute元素的margin属性永远是相对于其dom逻辑父元素而言

所以很多时候我们可以直接用abdolute和margin的组合来控制绝对定位元素,不用再设置其父元素为relative

absolute不一定要与z-index属性同时出现

  • 让absolute元素覆盖正常文档流内元素(不用设z-index,自然覆盖)
  • 让后一个absolute元素覆盖前一个absolute元素(不用设z-index,只要在HTML端正确设置元素顺序即可)

还有一个css书写z-index滥用了的习惯,很多人都喜欢把z-index往很大数字写,但是其实在真正情况下,1,2,3也就够了

猜你喜欢

转载自blog.csdn.net/baizaozao/article/details/79643390