绝对定位(absolute)

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。

语法:

选择器 { position:absolute; }
  • 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
  • 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
  • 绝对定位不再占有原来的位置。(脱标)

子绝父相

子绝父相的意思就是如果子级是绝对定位,父级就要用相对定位!

  1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方。不会影响其他兄弟盒子
  2. 父盒子需要加定位限制盒子在父盒子内显示
  3. 父盒子布局时,需要占有位置,因此父亲只能是相对定位

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

总结:因为父级需要占有位置,因此是相对定位。子盒子不需要占有位置,则是绝对定位。

实现绝对定位的盒子居中显示

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。

  1. (left: 50%; ):让盒子的左侧移动到父级元素的水平中心位置
  2. (margin-left: -100px;):让盒子向左移动自身宽度的一半

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信
通知:站点改版中,敬请期待