绝对定位(Absolute positioning)

绝对定位的特性

包裹性

absolute包裹性展示

跟float一样,absolute也具有包裹性,两者的包裹性都类似于使元素inline-block化.

破坏性

absolute破坏性展示

相对于float引起父元素塌陷,absolute要更进一步,上面的例子就可以看出,absolute元素完全脱离文档流,并且被其它盒子以及盒子内的文本无视

absolute替代方案

由于absolute滥用会降低扩展性和维护性,所以需要尽量少使用absolute

使用margin代替absolute为价格标签定位

通过给span标签设置一个div,设置div的margin实现

图片图标绝对定位覆盖

这个案例有三个图标覆盖,第一个hot图标使用absolute+margin,设置margin调整位置紧紧跟随header导航最后一个导航链接字体;第二个使用元素脱离文档流,后面的图片直接无视absolute的原理实现重叠;第三个vip图标设置absolute属性后,位置跟原先的位置一样,也就是在图片的后面紧紧跟随,然后设置margin-left图标宽度的负值就可以完成图标覆盖,这里需要注意的一点是为了保证图片和图标之间没有空隙,需要在它们之间设置注释<!-- -->

使用无依赖的绝对定位实现下拉框

这个案例我们主要利用的是absolute的跟随性,配合margin使搜索结果定位到搜索框下边框

居中及边缘对齐定位

第一个例子是图片居中对齐,父元素设置text-align:center,子元素由于是inline-block元素,所以会居中,为了兼容IE浏览器,需要在图片前面设置&nbsp,因为&nbsp需要占据0.25em所以我们在父元素设置letter-spacing:-.25em

空格宽度参考

第二个例子是右下角边缘对齐,父元素设置text-align:right,子元素设置position:fixed固定定位,并且需要display:inline为了防止错位

各种对齐溢出技巧实例

第一个例子是让星号绝对定位,然后它脱离文档流,不占用任何空间,所以后面的文字对齐就不受影响

第二个例子图标使用绝对定位,然后让小图标做偏移图表宽度,这就实现了图文对齐

第三个例子是文字溢出,使用无依赖绝对定位,文字不断行

absolute与width/height

容器无需固定width/height值,内部元素可拉伸

这个例子使用绝对对位元素left: 0; top: 0; right: 0; bottom: 0;可以实现宽高百分之百的拉伸特性,父元素设置inline-block具有包裹性,我们在这里设置的半透明遮罩层可以完美覆盖图片

容器拉伸,内部元素支持百分比width/height值

一般情况下,父级容器设置height:auto,子元素不能使用百分比高度,这时,子元素设置left: 0; top: 0; right: 0; bottom: 0;利用绝对元素拉伸特性,也可以使用百分比高度

left/right拉伸和width同时存在

同时设置left/right与width起作用的会是width,这时候再使用margin-left/margin-right:auto会使绝对定位水平居中,垂直居中同理,这也就是使用absolute的水平垂直居中的原理

使用absolute实现两栏等高布局

这个例子的实现思路是设置一个width:100%;height:999em的空绝对定位元素,放在侧边栏,给侧边栏添加position:relative限制,然后在绝对定位元素同级放置一个设置position:relative;z-index:1元素包裹住图片,把图片都设置为display:block,最后把容器设置overflow:hidden

实现原理是由于绝对定位元素无高度特性无宽度特性,我们可以伪造一个高度足够高的绝对定位层,同时设置父元素溢出隐藏,那么其多出来的高度就不会显示了,也就实现了看上去的等高布局效果

absolute与网页整体布局

仿慕课网的移动端页面

深入理解absolute