一、绝对定位的特征
绝对定位有着与浮动一样的特性,即包裹性和破坏性。
就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度;而绝对定位的元素高度和宽度都没有了。
请看下面代码:
- <!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。
如果绝对定位的元素没有设置偏移属性,虽然脱离文档流,但是它的位置是原地不动的。
偏移属性可以为负值,将元素定位到包含块之外。
代码在这里:
- <!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><!--关闭box1-->
- </div><!--关闭container-->
- <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><!--关闭box2-->
- </div><!--关闭container-->
- <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><!--关闭box3-->
- </div><!--关闭container-->
- <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><!--关闭box4-->
- </div><!--关闭container-->
- <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><!--关闭box5-->
- </div><!--关闭container-->
- </body>
- </html>
三、用margin调整绝对定位元素的位置
绝对定位的元素,除了可以使用top、right、bottom、left进行偏移之外,还能够通过margin值进行精确定位,而且自适应性更好。
示例:
- <!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进行精确定位,不依赖于任何其他东西,更加可控。
四、绝对定位与整体布局
如何用绝对定位来对页面进行整体布局?
简单粗暴,不学就浪费啦!!!
- <!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