绝对定位是我们在使用css时经常使用到的一种布局方式，下面说一下什么是绝对定位。

绝对定位使用position:absolute来定义，首先，要理解的是使用了绝对定位的元素它会脱离文档流，所谓脱离文档流就是它在文档中原来的位置已经不存在了，和它前面及后面的元素都没有什么关系了，我们可以看到一个div元素如果脱离了文档流后，它后面的元素位置会上移，这个div就像是多了一层一样盖在其他元素上面。也正是因为它脱离了文档流，我们才能任意的来重新安排它的位置。那么究竟是怎么来定位的？记住以下内容：

绝对定位的元素，会相对于它最近的已定位的父元素来进行定位，如果找不到这样的一个父元素，就相对于它的初始包含块body或html来定位。

直接上代码：

<html>
<head>
<style>

/* 如果去掉这里的position属性，就会发现他下面的使用了绝对定位的子元素会相对于body或html来定位了 */
.grandpa{
width:300px;
height:300px;
border:1px solid blue;
margin-top:100px;
position:relative;
}
.parent{
width:200px;
height:200px;
border:1px solid green;
}

.son{
width:100px;
height:100px;
border:2px solid red;
position:absolute;
right:0px;
top:0px;
}
body{
border:1px solid red;
margin:20px;

}

html{
border:1px solid red;
}

.uncle{
border:2px solid yellow;
width:250px;
height:100px;
position:absolute;

}
</style>
</head>
<body>
<div class = "grandpa">
<!--该div使用了绝对定位，它会脱离文档流，所以它后面的元素位置会上移，它就盖在了所有元素的上面，表现的就是多了一层的感觉-->
<div class = "uncle"></div>
<div class ="parent">
<!--该元素使用了绝对定位，它所找到的离它最近的已定位的父div是class = "uncle"的div，所以就相对于该父div进行定位了-->
<div class = "son">
</div>
</div>
</div>
</body>
</html>

图示说明：

css绝对定位的更多相关文章

  1. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  2. CSS绝对定位详解

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.直线电机生产厂家 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素 ...

  3. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

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

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

  5. CSS 绝对定位和相对定位

    CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...

  6. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  7. 详解 CSS 绝对定位

    基本定义和用法 在 CSS 中,position 属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型. 当设置 position 属性的值为 absolute 时,生成绝对定 ...

  8. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  9. 深入理解CSS绝对定位

    × 目录 [1]定义 [2]特性 [3]display[4]clip[5]静态位置[6]overflow 前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定 ...

随机推荐

  1. Hibernate 框架

    首先,我们先来了解一下什么是 Hibernate 框架. 什么是 Hibernate 框架? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO ...

  2. 浅谈python中文件和文件夹的相关操作

    文件操作 文件的打开与关闭 打开文件 使用open(文件名,访问方式)函数,可以打开一个已存在的文件,或者创建一个新的文件. 示例如下: f = open('test.txt') # 访问方式可以省略 ...

  3. vscode 支持 threejs 的智能提示

    VSCode Typings and Intellisense: Dummy Learning VS-Code 1 Jun 20, 2016 Updated on Jun 20 2016 for 1. ...

  4. linux command line learn - get the absolute path of a file

    get the absolute path of a file in linux readlink -f filenme [heshuai@login01 3_Variation_calling]$ ...

  5. Oracle中的转换函数

    Oracle中的转换函数有三个,分别为to_char(),to_date(),to_number() 1.to_char()的用法 格式化当前的日期时间 select sysdate,to_char( ...

  6. 建立apk定时自动打包系统第三篇——代码自动更新、APP自动打包系统

    我们的思路是每天下班后团队各成员在指定的时间(例如下午18:30)之前把各自的代码上传到SVN,然后服务器在指定的时间(例如下午18:30)更新代码.执行ant 打包命令.最后将apk包存放在指定目录 ...

  7. net core Webapi基础工程搭建（六）——数据库操作_Part 2

    目录 前言 开始 使用 小结 前言 昨天是写着写着发现,时间不早了,已经养成了晚上下班抽时间看看能写点儿啥的习惯(貌似),今天实在是不想让昨天没做完的事情影响,所以又坐下,沉下心(周末了),开始把数据 ...

  8. Streaming-大数据的未来

    分享一篇关于实时流式计算的经典文章,这篇文章名为Streaming 101: The world beyond batch 那么流计算如何超越批处理呢? 从这几个方面说明:实时流计算系统,数据处理模式 ...

  9. nginx对特定参数限流

    接到一个需求, 需要对请求(GET)里面的某个参数  的特定的值, 进行限流; 因为不限流的话, 不知道什么时候这个id的请求飙一下, 服务端就被压死了... 就像这样: /index.html?id ...

  10. Linux任务调度(8)

    crond任务调度: 是指系统在某个时间执行特定的命令或程序. 分类:1.系统工作,有些重要的工作必须周而复始地执行,如病毒扫描等:2.个别用户工作,个别用户可能希望执行某些程序,如mysql数据库备 ...