绝对定位(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