css绝对定位

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

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

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

直接上代码：

/* 如果去掉这里的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 class = "uncle"></div>
<div class ="parent">

<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 前面的话前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定 ...

随机推荐

C#使用代理IP发送请求
https://www.cnblogs.com/benbenfishfish/p/5830149.html 获取可代理的IP https://www.cnblogs.com/ShalenChe/p ...
egg-sequelize-ts 插件
egg-sequelize-ts plugin 目的 (Purpose) 能让使用 typescript 编写的 egg.js 项目中能够使用 sequelize方法,并同时得到egg.js所赋予的功 ...
CodeForces 1129C Morse Code
洛谷题目页面传送门 & CodeForces题目页面传送门题意见洛谷里的翻译. 首先我们可以用区间DP算出对于每个子01串,能表示的字母串的个数. 设$dp_{i,j}$表示长度为\(i ...
php Basic HTTP与Digest HTTP 应用
Basic HTTP 认证范例 <?php //Basic HTTP 认证 if (!isset($_SERVER['PHP_AUTH_USER'])) { header('WWW-Authen ...
关于阿里云Mysql分页查询不走索引的问题
需要修改阿里云中的MYSQL 配置参数 : eq_range_index_dive_limit 阿里云上默认是 10 , 这个参数表示 in 查询条件超过 10 个就不走索引,走全表扫描.如果我 ...
MySQL隔离性及Spring事务
一.数据库事务ACID特性必须要掌握事务的4个特性,其中事务的隔离性之于MySQL,对应4级隔离级别. 原子性(Atomicity): 事务中的所有原子操作,要么都能成功完成,要么都不完成,不能停滞 ...
阿里云部署 Flask + WSGI + Nginx 转载详解
我采用的部署方案是: Web 服务器采用 uwsgi host Flask 用 Supervisor 引用 uwsgi 作常规启动服务基于 Nginx 作反向代理首先, 阿里云服务器可以通过 SS ...
java多线程----悲观锁与乐观锁
java多线程中悲观锁与乐观锁思想一.悲观锁总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁(共享资源每次只给一个线 ...
AR+工业，带来哪些革变呢？
随着技术的普及相信大家对VR和AR也略有所知,尤其是AR增强现实技术,已经成为许多科技巨头企业争相扩疆的热土,目前来说,AR技术最广泛的应用是工业领域,已经显示出巨大的价值. ...
Java网络编程 -- NIO非阻塞网络编程
从Java1.4开始,为了替代Java IO和网络相关的API,提高程序的运行速度,Java提供了新的IO操作非阻塞的API即Java NIO.NIO中有三大核心组件:Buffer(缓冲区),Chan ...

css绝对定位

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

随机推荐

热门专题