Absolute定位的特点wrappingabsolutewrappingdisplay和float一样，absolute也有wrapping，这两种wrapping类似于做元素inline-block。Destructiveabsolute破坏性显示导致父元素相对于float折叠，absolute更进一步，上面的例子表明absolute元素完全脱离了文档流，被其他框和框内的文本忽略。保证金取代绝对价格标签定位。为span标签设置一个div，并设置div的边距，实现图片图标的绝对定位。在这种情况下，存在三个图标覆盖范围。第一个热点图标使用absolute+margin，调整margin紧跟header。导航中最后一个导航链接的字体；第二种使用文档流外的元素，后面的图片直接无视绝对原则实现重叠；第三个vip图标设置absolute属性，位置与原位置相同，即图片后面Followclosely，然后设置margin-left图标宽度为负值，完成图标覆盖。这里需要注意的一点是要保证图片和图标之间没有空隙，需要在它们之间设置注释使用非依赖绝对定位实现下拉框在这case，我们主要是利用absolute的followability，配合margin将搜索结果定位到搜索框的中心，边缘对齐。第一个例子是图片居中，父元素设置text-align:center，子元素会居中，因为它是inline-block元素。为了兼容IE浏览器，需要在图片前面设置 ，因为 需要占用0.25em，所以我们在父元素中设置letter-spacing:-.25em空间宽度参考第二个例子是右下角边缘对齐，父元素设置text-align:right，子元素设置position:fixed固定定位，需要display:inline防止错位。各种对齐溢出技巧的例子第一个例子是让星号绝对定位，然后它就脱离了文档流，不占用任何空间，所以不会影响后面的文本对齐。第二个例子图标使用绝对定位，然后让小图标偏移图表的宽度，实现了图表文字对齐的第三个例子文字溢出，使用非依赖绝对定位，文字继续绝对和宽度th/height容器不需要固定宽高值，内部元素可以拉伸。在本例中，绝对对齐元素left:0;顶部：0；右：0；底部：0；可以实现宽高100%的伸缩特性，父元素设置inline-block是wrapping。我们这里设置的半透明遮罩层可以完美遮盖图片容器的拉伸。内部元素支持百分比宽度/高度值。一般父容器设置为height:auto，子元素不能使用百分比高度，此时设置子元素left:0；顶部：0；右：0；底部：0；使用绝对元素拉伸特性，也可以使用百分比高度left/rightstretch和width同时存在，设置left/right和width的函数为width。这时候使用margin-left/margin-right:auto就会让absolute定位水平居中，垂直居中也是一样的。这就是使用absolute实现水平和垂直居中的原理。本例两列等高布局的实现思路是设置一个空的绝对定位元素，width:100%；height:999em，放在侧边栏上，给侧边栏加上position:relative限制，然后和绝对定位元素放在同一层放置一个position:relative;z-index:1元素包裹图片，设置图片要显示：块，最后设置容器溢出：隐藏。实现原理是绝对定位元素没有高宽特性，所以我们可以伪造一个高度足够高的绝对定位层，同时设置父元素溢出隐藏，那么它多余的高度就不会absolute看似轮廓的布局效果，网页整体布局模仿MOOC.com的动感在尾页深入理解absolute
