绝对定位是我们在使用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. 如何思考博弈dp

    两个人的规则是否一致 若仅仅是先后的差别 我们可用dp解决一般思考一个子状态 对于当前的那个状态 我们进行什么样的操作 已知什么

  2. Go中sync包学习

    前面刚讲到goroutine和channel,通过goroutine启动一个协程,通过channel的方式在多个goroutine中传递消息来保证并发安全.今天我们来学习sync包,这个包是Go提供的 ...

  3. Redis——基础使用

    Redis总体介绍: Redis特性 Redis(REmote DIctionary Server),是一个开源的内存数据库 持久化:RDB.AOF 主备复制 丰富的数据结构 Lua脚本.事务 Red ...

  4. 三步理解--门控循环单元(GRU)，TensorFlow实现

    1. 什么是GRU 在循环神经⽹络中的梯度计算⽅法中,我们发现,当时间步数较⼤或者时间步较小时,循环神经⽹络的梯度较容易出现衰减或爆炸.虽然裁剪梯度可以应对梯度爆炸,但⽆法解决梯度衰减的问题.通常由于 ...

  5. 使用webpack---安装webpack和webpack-dev-server

    1.先确保安装了最新版的Node.js和NPM,并已经了解NPM的基本用法 (以下使用cmd命令行进行) 2.安装webpack (1)全局安装 $ npm install webpack -g   ...

  6. PL/SQL 调用 JAVA代码

    1.直接在 SQL Developer中写入代码 create or replace and compile java source named "HelloWorld" as p ...

  7. Python学习 之 Python入门

    第二章 Python入门 2.1 环境安装 2.1.1 下载解释器: py2.7.16 (2020年官方不再维护) py3.6.8 (推荐安装) 1.下载解释器一定去官网下载,https://www. ...

  8. 初探Electron，从入门到实践

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.   在开始之前,我想您一定会有这样的困惑:标题里的Electron ...

  9. 详解golang net之transport

    关于golang http transport的讲解,网上有很多文章读它进行了描述,但很多文章讲的都比较粗,很多代码实现并没有讲清楚.故给出更加详细的实现说明.整体看下来细节实现层面还是比较难懂的. ...

  10. python 14 装饰器

    目录 装饰器 1. 开放封闭原则 装饰器 1. 开放封闭原则 扩展是开放的,增加新的功能:修改源码(修改已经实现的功能)是封闭的. 在不改变源码及调用方式的前提下额外增加新的功能. # 版一: imp ...