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