文档章节

CSS 中position:absolute的定位到底是相当于body,还是父级元素的问题

法斗斗
 法斗斗
发布于 2017/07/03 15:05
字数 350
阅读 30
收藏 1

CSS 中position:absolute的定位到底是相当于body,还是父级元素的问题

position:absolute的定位是一个相对麻烦的问题。

首先在文档流中,定义为position:absolute的元素已经被删除了。

那它的定位到底是相对于body,还是父级元素呢?

结论如下:

position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素,如果都没有,就是相对于body。

举例如下:

1、它的父级元素都没有,就是相对于body定位的。

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;">
        <div style="width:100px;height:100px;background-color:blue;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

2、它的父级元素里有,就是相对于哪个有的父级元素。

例一:相对于第一个div定位

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;position:absolute;">
        <div style="width:100px;height:100px;background-color:blue;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

例二:相对于第二个div定位

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;position:absolute;">
        <div style="width:100px;height:100px;background-color:blue;position:relative;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

 

本文转载自:

法斗斗
粉丝 22
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
css中那些我没有弄清楚的定位position

position的值到底是几个呢?我想应该是4个吧 static:默认值,静态; relative:相对定位; absolute:绝对定位; fixed:这个是固定的意思。 好吧...战役才刚刚开始... <div class="parent"...

宝宝eleven
2012/12/17
0
0
HTML中的布局方式:absolute、relative、fixed、static

在CSS中关于定位的内容是: position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,这是默认值。 relative(相对定...

长平狐
2013/12/25
3.5K
0
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
12
0
详解css中position属性

最近画富瑞的界面,很多元素的定位都是个问题(在我没有很详细的知道position属性之前) 后来上网查了下关于position的一些相关的属性和用法,遂整理了一下 position:属性:固定元素的定位类...

邪气小生
2015/11/09
0
0
relative与absolute的区别

relative相对定位 把其父元素看作一个盒子的话,它默认会被放在盒子的左上角,相当于块级元素,默认情况宽度为父元素宽度。它的父元素是指设置position属性辈分最低的长辈元素。如果没有设置...

雨未浓
2018/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试题:你简历中写到熟悉Spring源码,那你给我说说它用到了那些设计模式?

Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内典范。好了,话不多说,开始今天的内容。 spring中常用的设计模式达到九种。 模板方法(Template Method)...

我最喜欢三大框架
27分钟前
1
0
Sentinel Dashboard中修改规则同步到Nacos

上一篇我们介绍了如何通过改造Sentinel Dashboard来实现修改规则之后自动同步到Apollo。下面通过这篇,详细介绍当使用Nacos作为配置中心之后,如何实现Sentinel Dashboard中修改规则同步到N...

程序猿DD
34分钟前
4
0
Jenkins发送测试报告邮件

简介:总结怎么使用Jenkins执行自动化测试后发送测试报告邮件 一、系统设置 1、在Jenkins安装Email Extension Plugin插件,如下图: 2、设置Extended E-mail Notification (1)进入“系统管理”...

shzwork
37分钟前
1
0
状态模式

//相当把一个State对象存到Context对象中,然后通过Context实例化对象调用保存的state对象去调用state的相应的方法 https://blog.csdn.net/syc434432458/article/details/51210361...

南桥北木
48分钟前
3
0
基于 Jenkins + JaCoCo 实现功能测试代码覆盖率统计

本文首发于:Jenkins 中文社区 使用 JaCoCo 统计功能测试代码覆盖率? 对于 JaCoCo,有所了解但又不是很熟悉。 "有所了解"指的是在 CI 实践中已经使用 JaCoCo 对单元测试代码覆盖率统计: 当...

Jenkins中文社区
56分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部