【CSS学习笔记】绝对定位的父类参照物的确定

cooxer 发布于2019-08-28 18:28 / 861人阅读

摘要：今天看定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素。第三步，在第二步的基础上给添加属性声明小结唉，这次却被擒获了唉，怎么回事没错，做绝对定位的祖先参照物，是设置了相对定位且离最近的那个祖先类元素。

今天看CSS定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素html。
这个默认根元素已经明确，但是祖先类元素参照物如何确定呢？

Just Try 首先，给出代码：

html部分

let's begin.

one

two

three

four

five

hello world!

css部分

#one {
    background-color: lime;
    outline: 2px dashed silver;
    width: 50%;
}
#two {
    background-color: yellow;
    outline: 2px dashed gray;
    width: 50%;
    height: 75%;
}
#three {
    background-color: orange;
    outline: 2px dashed blue;
    width: 50%;
    height: 75%;
}
#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
}
#five {
    background-color: lightblue;
    outline: 2px dashed red;
    width: 50%;
    height: 75%;
}

显示如下：

第一步，给标记为four的div设置绝对定位

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: 5%;
    top: 5%;
}

小结：可以看到four（后面直接将标记的id名称对应div元素）已经脱离原有的文档流，在他的父类元素three中不占用位置了。而它的参考物似乎就是浏览器视窗本身，也就是html的html元素这个默认的根元素，你看，它离浏览器视窗顶部和右部的距离是不是差不多都是视窗高度的5%，而且它自身的宽度、高度不也是分别为浏览器视窗的宽高的对应50%和75%么。

第二步，给one添加position: relative;属性声明

小结：这次four被限制到one的边框内了，而且宽高和top、right都自适应到了以one的尺寸为基准大小。所以说这个时候，one成了four绝对定位时的祖先元素参照物。

第三步，在第二步的基础上给two添加position: relative;属性声明

小结：唉，这次four却被two“擒获”了唉，怎么回事？没错，four做绝对定位的祖先参照物，是设置了相对定位且离four最近的那个祖先类元素。跟four最有“血缘关系”，four就会被这个最近的祖先类元素“捕获”。搂到怀里唉，掩面&羞涩。

第四步，测试一下第三步的结论，再给three添加position: relative;属性声明

小结：瞧！是不是？three是four的直接父元素，在one和two都已经设置position: relative;属性声明的前提下，three还是把four给捕获了。

但是！前面几部都是常规套路，如果“不走寻常路”（广告位招租）呢？

第五步，在第四步的基础上，将four的css规则中right的属性值改为负值呢？会有什么效果？

此时，four已经“一只脚跨出”了three的“势力范围”。
css代码如下

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: -25%;
    top: 5%;
}

小结：一个元素A要设置绝对定位，离它最近的、设置了相对定位的祖先类元素B，就会“捕获”它。但是最终，作为后代元素的A也只是以B为参照物，也就是从B的位置“出发”，至于能去到哪里，则是由top/right/bottom/left属性来决定了。

看完以后学到了啥

哦，似乎只是知道了一个元素要设置绝对定位必须首先确定离它最近的、设置了相对定位的祖先元素作为参照物，然后就可以“背上行囊来一次说走就走的旅行了”（扇脸），应该是可以进行相对于参照物的位移了。

唠叨

至于为何要用前后的两个p元素和five，他们也都是作为我们实验的对照组啊。这里只用了对W3C标准支持得好的chrome内核的，360极速进行测试，其他浏览器下是什么测试情况有待考察。
此文本是，个人学习实践结果，作为学习笔记加深印象。其他初学者也许亦有些微帮助。
至此。

软件与环境

Windows 7 ultimate 64bit；

sublime text 3 + liveStyle；

360 chrome（内核版本45.0.2454.101），应该不是不很旧吧。

GPU云服务器云服务器 java的父类和子类中的绝对定位深度学习的确定相对定位-绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111255.html

前端笔记之CSS（下）浮动&BFC&定位&Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
学习笔记—CSS基础

摘要：的声明内联样式在元素内部在标签上使用属性进行声明。此声明只作用于当前标签。拥有最高优先级。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。元素的位置相对于浏览器窗口是固定位置。概念　　CSS 指层叠样式表（Cascading Style Sheets），是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。　　HTM...

caspar 2019-04-23 11:41 评论0 收藏0
我所了解的CSS包含块

摘要：根元素包含块根元素的包含块是一个矩形叫做初始化包含块。如果属性是的话，包含块就是由组成的。示例二代码在这里，这个标签为默认的且它的父标签的为，所以标签的包含块为标签，通过我们的判断规则一来确定。写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。指出错误观念许多开发者认为一个元素的包含块...

BenCHou 2019-08-30 15:54 评论0 收藏0
CSS布局模型

摘要：实现相对于父元素定位参照定位的元素相对参照元素进行定位相对定位元素css三种基本网页布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）流动模型（默认状态下的模型）特点：块状元素在所包含元素内自上而下按顺序垂直延伸分布，内联元素在所处的包含元素内从左到右水平分布浮动模型可以让两个块状元素并排显示 float:left float:...

liangzai_cool 2019-04-23 13:09 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0