绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器 { position:absolute; }- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原来的位置。（脱标）
子绝父相
子绝父相的意思就是如果子级是绝对定位，父级就要用相对定位！
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。不会影响其他兄弟盒子
- 父盒子需要加定位限制盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位。子盒子不需要占有位置，则是绝对定位。
实现绝对定位的盒子居中显示
加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
- （left: 50%; ）：让盒子的左侧移动到父级元素的水平中心位置
- （margin-left: -100px;）：让盒子向左移动自身宽度的一半
版权声明：本文为本站原创文章，由37.2℃发表，转载请注明出处，保留一切权利！
转载请注明：转载于37.2度云笔记
微信扫一扫 