一、绝对定位的特征

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

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

请看下面代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="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>
<div class="box1">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p>这是普通流中的两幅图像。</p>
</div>
<div class="box2">
<img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" /> <div class="wraper">
<img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
</div>
<p>左图,将第一幅图像绝对定位,其完全脱离文档流,并且覆盖在第二幅图像之上;由此看出,绝对定位的破坏性不仅让元素没有了高度,甚至没有了宽度。</p>
<p>右图,将第一幅图像左浮动,其虽然脱离了文档流,但是并没有覆盖在其他元素之上;浮动的破坏性仅仅破坏了元素的高度,而保留了元素的宽度。</p>
</div>
<div class="box3">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p>将容器绝对定位,体现其包裹性。</p>
</div>
</body>
</html>

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

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

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

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

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

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

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

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

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

代码在这里:

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

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

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

示例:

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

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

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

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

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

在写这篇博文的时候,absolute让我给relative带话,它说:“relative,你给我滚好吗,我这辈子都不想看到你!”

预知后事如何,请移步absolute与relative不得不说的故事

四、绝对定位与整体布局

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

简单粗暴,不学就浪费啦!!!

 <!DOCTYPE html>
<html>
<head>
<meta charset="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: 0 5px;
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;
} .content h1 {
margin-top: 100px;
margin-left: 50px;
} .content li {
margin-left: 100px;
margin-top: 80px;
font-size: 24px;
line-height: 1.5;
} ol {
margin-bottom: 80px;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>Header</h1>
</div>
<div class="aside">
<h1>Aside</h1>
</div>
<div class="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>
<div class="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>

CSS position:absolute浅析的更多相关文章

  1. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  2. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  3. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  4. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  5. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  6. css position:absolute align center bottom

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  8. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  9. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

随机推荐

  1. 20181023-3 每周例行报告(添加PSP)

    此作业要求:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2100] 一.本周PSP表格 类型 任务 开始时间 结束时间 中断时间 净时 ...

  2. 20135337朱荟潼 Linux第四周学习总结——扒开系统调用的三层皮(上)

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 知识点梳理 一.用 ...

  3. 炸弹人的Alpha版使用说明

    本游戏是一款手机游戏,学生可以在无聊时打发时间,放松心情.现在只有三关,但游戏运行还算可以. 注意事项: 目前游戏还有一些不好的地方,游戏无法暂停,如果游戏任务死亡,则无法重开. 游戏后面的关卡还需要 ...

  4. JS基础(三)语句

    一.判断语句(PS:一般情况下判断条件最终应该是一个布尔值.) 1.if语句 1)基本格式 if(判断条件){ 如果判断条件成立则执行的语句 }else{ 如果判断条件不成立则执行的语句 } 2)扩展 ...

  5. PAT 2016 数据的交换输出

    http://acm.hdu.edu.cn/showproblem.php?pid=2016 Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数 ...

  6. 【设计模式】—— 装饰模式Decorator

    前言:[模式总览]——————————by xingoo 模式意图 在不改变原来类的情况下,进行扩展. 动态的给对象增加一个业务功能,就功能来说,比生成子类更方便. 应用场景 1 在不生成子类的情况下 ...

  7. binlog2sql闪回恢复数据

    用途: .数据快速回滚 .从binlog生成标准sql 使用限制: .必须设置binlog_format=ROW .binlog_row_image=full,该参数默认为FULL .恢复用户拥有的最 ...

  8. 【POJ2796】Feel Good 单调栈

    题目大意:给定一个长度为 N 的序列,求任意区间 [ l , r ] 中最小的\(min\{v[i],i\in[l,r] \}*\Sigma_{i=l}^rv[i]\). 题解:这是一道具有标准单调栈 ...

  9. 移动H5开发入门教程:12点webAPP前端开发经验

    如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...

  10. Python 基础数据类型之dict

    字典是另一种可变容器模型,且可存储任意类型对象.字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示:d = {k ...