CSS笔记——absolute
absolute && float
前面的浮动讲到过，浮动具有包裹性和破坏性；而absolute也有这两大特性。
包裹性：
我们给容器设置了absolute属性以后，它会把内容紧紧地包裹起来。
破坏性：
内容设置了absolute属性以后，父元素会发生高度塌陷。
absolute使用误区
absolute可以独立使用，不一定非得和relative一起使用。
absolute特性
1）与float两不并存
一个元素不能同时设置float和absolute属性，否则的话float会失效。这个元素依然会出现在原本应该出现的地方。
2）位置跟随
简单来说，就是原来在哪儿显示，使用了absulote之后，依然是在哪儿显示。块状元素换行显示，行内元素一行显示。
3）脱离标准文档流
当元素使用了absolute属性之后，它会脱离正常的文档流显示。后面的元素会进入到原来属于该元素的位置，产生重叠！！！
4）无“实体”
元素的宽度、高度通通失效，变成无实体，不占据任何空间。
特别注意：
IE7下，使用了absolute属性的元素会被添加上inline-block显示，如果想要换行显示，需要用div包裹元素。
位置跟随的时候，需要提别注意，每个标签直接如果是直接回车换行写的，会有空白字符。解决方案是，在标签之间使用注释连接，如下所示
<img><p>absolute布局案例
1）文字上的小图
实现方式:
给图片加上absolute之后，它会跟随到文字后面，再设置margin值。
<style>
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
background: url(./1.gif)
}
style>
<body>
<a> 你好啊<i class='icon-hot'>i>a>
body>2） “不一样”的居中
这里的icon实现了水平居中，但是它的实现有些神奇。一起来看看代码吧。
<style>
.cen {
text-align:center;
margin-top: 100px;
}
.course-loading {
position: absolute;
margin-left: -26px;
}
style>
<body>
<div class="cen">
<img src="http://static.mukewang.com/img/5453077400015bba00010001.gif" class="course-loading">
div>
body>
实现方式：
父元素使用text-align:center;
图片使用absolute属性，加上margin-left设置为负值（值为图片宽度的一半）。
其实，图片还是跟随在前面的文字后面，只不过这里的文字是空格。
**3） 文字溢出
可以看到，第二行的文字已经溢出了容器宽度。
这里同样只使用了abosulute属性，由于跟随特性，所以照常显示。
top、right、bottom、left与width、height
1） 相互替代
比如，现在需要实现一个全屏遮罩层。
可以使用width：100%，height：100%；
也可以使用top：0，right：0，bottom：0，left：0。
还有
2） 相互支持
下面看例子
3） width 、height 更优先
当同时设置top、right、bottom、left 和width 、height 时，width 、height 更优先。
absolute整体布局案例
使用absolute隐藏
1）absolute属性相关的隐藏方法
使用absolute隐藏于显示元素是会产生重绘而不会产生强烈的回流。
而使用display:none不仅会重绘，还会产生回流，DOM影响范围越广，回流越强烈。
所以，就JavaScript交互的呈现性能上来讲，使用absolute隐藏是要优于display相关隐藏的。
2）配合JavaScript使用
传统方式：
例如，display相关的隐藏设置为： dom.style.display = “none”;
但如果要显示隐藏的元素，因为标签分为行内元素和块状元素
而 dom.style.display = “block”;
对于块状元素固然没有问题，但对于行内元素就有不妥了，会变成换行显示。没有一种统一的显示方式。这就是使用display属性控制元素显隐的局限性。
绝对定位方式：
而使用绝对定位实现的一些元素隐藏方法的控制就相对简单很多的。
例如， position:absolute + visibility:hidden方法，
只需要设置为 dom.style.position = “static”; dom.style.visibility = “visible”;
而无需担心原本标签的是inline水平还是block水平。
所以，就显隐的JavaScript控制上来讲，absolute相关方法要比display略胜一筹。
文章部分内容总结自：
张鑫旭
博文——“CSS 相对/绝对(relative/absolute)定位系列”
视频——“慕课网——CSS深入理解之absolute”
论点与版权所有归原作者所有