css绝对定位
绝对定位是我们在使用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绝对定位的更多相关文章
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- CSS绝对定位详解
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.直线电机生产厂家 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素 ...
- css绝对定位如何在不同分辨率下的电脑正常显示定位位置？
有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- CSS 绝对定位和相对定位
CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- 详解 CSS 绝对定位
基本定义和用法 在 CSS 中,position 属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型. 当设置 position 属性的值为 absolute 时,生成绝对定 ...
- CSS绝对定位absolute详解
转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...
- 深入理解CSS绝对定位
× 目录 [1]定义 [2]特性 [3]display[4]clip[5]静态位置[6]overflow 前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定 ...
随机推荐
- Extjs4 combobox hiddenName 后台取不到值
当我们用 下拉框传值时,有一个问题,就是他有两个值,一个是用来显示的,一个是我们实际往后台需要传递的值,即 name 与 value 所以 combobox 才有了 hiddenName 这个属性,他 ...
- idea中的springboot项目如何不用重新编译，自动热部署
两步走:引入依赖,配置idea 在pom.xml中引入如下依赖,关键字:devtools 第二步,修改idea两处配置 2.1 windows下,ctl+alt+s打开idea配置菜单 左上角输入框搜 ...
- redhat linux 5.3修改Java环境变量
需要配置的环境变量 1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序.我们需要把jdk安装目录下的bin目录增 ...
- JavaWeb——JSP开发1
1.什么是jsp,为什么要使用jsp. 再使用idea创建完一个web工程后,在webapp目录下会生成一个index.jsp 直接编译运行,网站将自动打开这样一个网页: 所以我们可以推测这个inde ...
- mybatis一对多双向映射
连表查询 select id resultType resultMap resultType和resultMap不能同时使用 association 属性 映射到多对一中的“一”方的“复杂类 ...
- 建立第一个G2图表
Step1:引进G2脚本 方法一:引入在线脚本 <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist ...
- 大话 Spring Session 共享
javaweb中我们项目稍微正规点,都会用到单点登录这个技术.实现它的方法各家有各界的看法.这几天由于公司项目需求正在研究.下面整理一下最近整理的心得. 简介 在分布式项目中另我们头疼的是多项目之间的 ...
- python第二课--分支结构与循环结构
if语句---分支结构 在Python中,要构造分支结构可以使用if.elif和else关键字.所谓关键字就是有特殊含义的单词,像if和else就是专门用于构造分支结构的关键字,很显然你不能够使用它作 ...
- spring-boot-plus集成Spring Boot Admin管理和监控应用(十一)
spring-boot-plus集成Spring Boot Admin管理和监控应用 spring boot admin Spring Boot Admin用来管理和监控Spring Boot应用程序 ...
- Streaming-大数据的未来
分享一篇关于实时流式计算的经典文章,这篇文章名为Streaming 101: The world beyond batch 那么流计算如何超越批处理呢? 从这几个方面说明:实时流计算系统,数据处理模式 ...