绝对定位是我们在使用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. 【Java例题】8.1手工编写加法器的可视化程序

    1. 手工编写加法器的可视化程序. 一个Frame窗体容器,布局为null,三个TextField组件,一个Button组件. Button组件上添加ActionEvent事件监听器ActionLis ...

  2. JNDI----数据连接池

    JNDI:提供了查找和访问各种命名和目录服务的通用,统一的接口 常用的配置属性:   name:表示以后要查找的名称.通过此名称可以找到DataSource,此名称任意更换,但是程序中最终要查找的就是 ...

  3. unity 四叉树管理场景

    当场景元素过多时,需要实时的显示及隐藏物体使得性能提示,但是物体那么多,怎么知道哪些物体需要显示,哪些物体不需要显示的.当然,遍历物体判断该物体是否可以显示是最容易想到的方法,但是每次更新要遍历所有物 ...

  4. 结构型设计模式——适配器模式（Go）

    适配器模式: 适配器模式是用于当别人提供的对象或接口中的方法或者其它属性啥的和我们的重复了,或者看的不顺眼.名字太长了记不住,而将其包装到一个对象中,然后通过你感觉自己舒服的方式或者方法名字去间接的调 ...

  5. Spark 系列（十）—— Spark SQL 外部数据源

    一.简介 1.1 多数据源支持 Spark 支持以下六个核心数据源,同时 Spark 社区还提供了多达上百种数据源的读取方式,能够满足绝大部分使用场景. CSV JSON Parquet ORC JD ...

  6. js五子棋游戏代码分享

    HTML代码 <canvas id="game"></canvas> CSS代码 * { margin: 0; padding: 0; } #game { ...

  7. mybatis基础简介

    1.mybatis的加载过程? 程序首先加载mybatis-config.xml文件,根据配置文件创建SQLSessionFactory对象:    然后通过SQLSessionFactory对象创建 ...

  8. 11.源码分析---SOFARPC数据透传是实现的？

    先把栗子放上,让大家方便测试用: Service端 public static void main(String[] args) { ServerConfig serverConfig = new S ...

  9. [SCOI2007]压缩(动态规划,区间dp,字符串哈希)

    [SCOI2007]压缩 状态:设\(dp[i][j]\)表示前i个字符,最后一个\(M\)放置在\(j\)位置之后的最短字串长度. 转移有三类,用刷表法来实现. 第一种是直接往压缩串后面填字符,这样 ...

  10. Spring入门(十一)：Spring AOP使用进阶

    在上篇博客中,我们了解了什么是AOP以及在Spring中如何使用AOP,本篇博客继续深入讲解下AOP的高级用法. 1. 声明带参数的切点 假设我们有一个接口CompactDisc和它的实现类Blank ...