CSS之页⾯布局之四（绝对布局）
绝对布局（Absolute Layout）就是指定元素的position属性为absloute，元素被指定为绝对定位后，浏览器会将其从流中删除。
与浮动布局不同（请参照前⾯的博⽂《CSS之页⾯布局之⼀（浮动布局） 》），浮动布局中浮动起来的元素，只是“半删除”。即对HTML端的块元素来说浮动起来的元素仿佛从流中被删除了。但对HTML端的内联元素来说浮动起来的元素仍旧存在。
绝对布局就不是“半删除”了，⽽是从HTML流中彻底删除该元素。被删除的元素和原始HTML流中其他元素，处于不同层⾯，这就产⽣了分层的概念。
实现⽅式：CSS端为元素的position属性设成absolute，并指定top，right，width等属性（即告诉浏览器窗⼝在何处显⽰该元素）
CSS端为<p id="absoluteLayout">设置position，top，right，width：
#absoluteLayout {
position: absolute;  //绝对定位
top: 100px;
right: 200px;
width: 280px;
}
如上图中，黄⾊框的<p>元素，与其他元素处于不同的层⾯上。页⾯可以有多个分层，每个分层都有个z-index属性，值越⼤越靠近你通过z-index来控制显⽰哪个层。因此如果想隐藏绝对定位的元素，只需要将该元素的z-index设为负数即可。
绝对定位的元素很可能会覆盖不想被覆盖的区域。⽽此时你⽆法像浮动布局（请参照前⾯的博⽂《CSS之页⾯布局之⼀（浮动布局） 》）那样指定clear属性，因为流中元素完全不知道绝对定位元素的存在。
absolute导致分层后，那该元素显⽰的位置该如何确定呢？即该元素该依据哪个定位点来定位？分两种情况：
1.该元素的parent元素也设置了position的ababsolute或relative，那该元素的定位点就是其parent元素左上⾓（准确地说是parent元素的padding的左上⾓，⾮margin的左上⾓）
2.除情况1外，该元素的定位点就是浏览器窗⼝左上⾓（即body的左上⾓），此时效果和设成fixed是相同的。因此fixed可以认为是⼀种特殊的absolute
PS：
position除了absolute还有：
position:static默认值，元素默认都是static，即元素在正常的流中
css固定定位
position:fixed是固定定位，相对于浏览器窗⼝进⾏定位，⼀旦⽤固定定位它就永远留在了该位置，即使⿏标滚动，它也原地不动。你可以这样理解：fixed是特殊的absolute，即fixed总是以body为定位对象的。
position:relative与绝对定位类似，只是它仍旧在页⾯流中（还在它本来的位置上），然后根据你指定的top，left，right，bottom来相对于其本来应该处于的位置进⾏偏移。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。