CSS position:absolute全面了解

春季是一个富有生命力季节，也是一个美丽、神奇，充满希望季节。都说春季是花海洋。粉色淡雅，白色端庄，红色热烈，紫色深情，泼泼洒洒，浓浓烈烈。一朵朵花，把春季朝气蓬勃都开出来了。

一、绝对定位的特征

绝对定位有着与浮动一样的特性，即包裹性和破坏性。

就破坏性而言，浮动仅仅破坏了元素的高度，保留了元素的宽度；而绝对定位的元素高度和宽度都没有了。

请看下面代码：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>绝对定位的特征</title>
<style>
.box1,.box2,.box3{
background-color:orange;
margin-bottom:30px;
}
.absolute{
position:absolute;
}
.wraper{
display:inline-block;
margin-left:300px;
}
.float{
float:left;
}
.box3{
position:absolute;
}
</style>
</head>
<body>
<divclass="box1">
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
<imgsrc="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg"alt="Apicture"style="width:240px;height:180px"/>
<p>这是普通流中的两幅图像。</p>
</div>
<divclass="box2">
<imgclass="absolute"src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
<imgsrc="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg"alt="Apicture"style="width:240px;height:180px"/>
<divclass="wraper">
<imgclass="float"src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
<imgsrc="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg"alt="Apicture"style="width:240px;height:180px"/>
</div>
<p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p>
<p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p>
</div>
<divclass="box3">
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
<imgsrc="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg"alt="Apicture"style="width:240px;height:180px"/>
<p>将容器绝对定位，体现其包裹性。</p>
</div>
</body>
</html>

二、绝对定位的一般规则：

元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。

绝对定位的包含块，是其最近的已定位的祖先元素。

如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。

如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。

如果没有已定位的祖先元素，元素的包含块定义为初始包含块。

偏移属性：top、right、bottom、left。

如果绝对定位的元素没有设置偏移属性，虽然脱离文档流，但是它的位置是原地不动的。

偏移属性可以为负值，将元素定位到包含块之外。

代码在这里：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>绝对定位的一般规则</title>
<style>
body{
background-color:#ccc;
}
.container{
width:500px;
background-color:orange;
margin:20pxauto50pxauto;
padding:20px;
border:2pxsolidred;
}
.box2img,.box3img,
.box4img,.box5img{
position:absolute;
}
.box3img,.box4img{
left:0;
bottom:0;
}
.box5img{
left:-30px;
bottom:-50px;
}
.block{
position:relative;
height:200px;
}
</style>
</head>
<body>
<divclass="container">
<divclass="box1">
<p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p>
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
<ul>
<li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li>
<li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li>
<li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li>
</ul>
</div>
</div>
<divclass="container">
<divclass="box2">
<p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p>
<p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p>
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
</div>
</div>
<divclass="container">
<divclass="box3">
<p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p>
<p>当偏移量为left:0;buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p>
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
</div>
</div>
<divclass="containerblock">
<divclass="box4">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:0;bottom:0时，图像到了这个容器的左下角（以边框为界）。</p>
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
</div>
</div>
<divclass="containerblock">
<divclass="box5">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:-30px;bottom:-50px时，图像到了这个容器之外（以边框为界）。</p>
<imgsrc="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"alt="Apicture"style="width:175px;height:100px"/>
</div>
</div>
</body>
</html>

三、用margin调整绝对定位元素的位置

绝对定位的元素，除了可以使用top、right、bottom、left进行偏移之外，还能够通过margin值进行精确定位，而且自适应性更好。

示例：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>用margin调整绝对定位元素的位置</title>
<style>
.box1,.box2,.box3{
display:inline-block;
margin-right:150px;
border:1pxsolidblue;
}
span{
background-color:red;
}
.box2span,.box3span{
position:absolute;
}
.meng{
margin-left:-3em;
}
.box4{
border:1pxsolidred;
width:500px;
margin:50pxauto0auto;
padding:20px;
}
li{
margin-bottom:20px;
}
</style>
</head>
<body>
<divclass="box1">
<span>卡哇伊</span>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"style="width:200px;height:300px"/>
<span>萌萌哒</span>
</div>
<divclass="box2">
<span>卡哇伊</span>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"style="width:200px;height:300px"/>
<span>萌萌哒</span>
</div>
<divclass="box3">
<span>卡哇伊</span>
<imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"style="width:200px;height:300px"/>
<spanclass="meng">萌萌哒</span>
</div>
<divclass="box4">
<ol>
<li>第一幅图，最开始的样子。</li>
<li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li>
<li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li>
</ol>
</div>
</body>
</html>

放弃偏移属性而改用margin来调整绝对定位元素，其原理在于：

绝对定位的元素，在不设置偏移量的时候，它虽然完全脱离了文档流，但它还在原来的位置。

利用偏移属性进行精确定位，其具体位置是取决于绝对定位元素的包含块，不同的包含块将会有完全不一样的定位结果。

而利用margin进行精确定位，不依赖于任何其他东西，更加可控。

四、绝对定位与整体布局

如何用绝对定位来对页面进行整体布局？

简单粗暴，不学就浪费啦！！！

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>绝对定位与整体页面布局</title>
<style>
*{
margin:0;
}/*重置所有margin为0，这一步极其重要，否则布局必乱。*/
html,body,.page{
width:100%;
height:100%;
overflow:hidden;
}
.page{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:#ccc;
}
.header{
position:absolute;
height:50px;
left:0;
right:0;
background-color:purple;
padding:05px;
z-index:1;
}
.header>h1{
line-height:50px;
text-align:center;
}
.aside{
position:absolute;
top:50px;
bottom:50px;
left:0;
width:100px;
background-color:orange;
}
.footer{
position:absolute;
right:0;
bottom:0;
left:0;
height:50px;
background-color:purple;
}
.footer>h1{
text-align:center;
line-height:50px;
}
.content{
position:absolute;
top:50px;
right:0;
bottom:50px;
left:100px;
background-color:cyan;
overflow:auto;
}
.contenth1{
margin-top:100px;
margin-left:50px;
}
.contentli{
margin-left:100px;
margin-top:80px;
font-size:24px;
line-height:1.5;
}
ol{
margin-bottom:80px;
}
</style>
</head>
<body>
<divclass="page">
<divclass="header">
<h1>Header</h1>
</div>
<divclass="aside">
<h1>Aside</h1>
</div>
<divclass="content">
<h1>实现原理</h1>
<ol>
<li>创建一个div.page，绝对定位，铺满全屏。</li>
<li>创建一个div.header，绝对定位，设定高度。</li>
<li>创建一个div.aside，绝对定位，设定宽度。</li>
<li>创建一个div.footer，绝对定位，设定高度。</li>
<li>创建一个div.content，绝对定位，根据周围div的宽高设定它的宽高；<br/>
以div.content元素取代原body元素，所有的页面内容都放在这里面。</li>
</ol>
</div>
<divclass="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>

以上这篇CSS position:absolute全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/19/5685300.html

全站频道

大家都在搜索：