HTML连载58-绝对定位的参考点以及注意事项
一、绝对定位参考点
1.规律：
（1）默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。
<style>
.box1{
width: 300px;
height: 300px;
background-color: red;
/*position:absolute;*/
/*left:0px;*/
/*bottom:0px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
（2）如果有一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。
.box1{
width: 300px;
height: 300px;
background-color: red;
position:absolute;
left:0px;
bottom:0px;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left:0px;
top:0px;
}
注意点：i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位，定位流中只有静态定位是不行的。
（3）如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。
.......上面的代码不变..........
.box3{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
right:0px;
bottom:0px;
}
.........省略代码.......
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
二、绝对定位的注意点
（1）如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点的，而不是以整个网页的宽度和高度作为参考点的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D152_LimeLightOfAbsolutePosition</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
bottom:0px;
right:0px;
}
.box2{
width: 2000px;
height: 100px;
background-color: blue;
position:
}
.box3{
width: 200px;
height: 2000px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
（2）一个绝对定位的元素会忽略祖先元素的padding属性。
.box4{
height: 300px;
width: 300px;
background-color: yellow;
padding:50px;
/*position:absolute;*/
/*boder:20px black ;*/
}
.box5{
height: 100px;
width: 100px;
background-color: red;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class="box4">
<div class="box5"></div>
</div>
三、源码：
D151_ReferencePointOfAbosulotePositoning.html
D152_LimeLightOfAbsolutePosition.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D151_ReferencePointOfAbosulotePositoning.html
https://github.com/ruigege66/HTML_learning/blob/master/D152_LimeLightOfAbsolutePosition.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载58-绝对定位的参考点以及注意事项的更多相关文章
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- UWA 技术分享连载 转载
技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...
- css之定位
定位有三种,分别是相对定位 position:relative; .绝对定位 position:absolute; .固定定位 position:fixed; 相对定位 相对定位,就是微调元素位置的, ...
- HTML和CSS高级指南——定位详解
本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...
- 【经验】css
1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...
- CSS属性：定位属性（图文详解）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- 前端技术之_CSS详解第六天--完结
前端技术之_CSS详解第六天--完结 一.复习第五天的知识 a标签的伪类4个: a:link 没有被点击过的链接 a:visited 访问过的链接 a:hover 悬停 a:active 按下鼠标不松 ...
随机推荐
- Android开发 SpannableString开发详解
前言 SpannableString,是google提供用来处理富文本的功能类.支持很多文本内容的效果变化.另外,它也是Android实现富文本编辑器的关键. 关键API详解 String conte ...
- Android开发 控件阴影详情
如何给控件设置阴影? <com.google.android.material.tabs.TabLayout android:id="@+id/tablayout" andr ...
- Python3基础笔记_字典
# Python3 字典 dict = {'} # 1.访问字典里的值 ,字典中没有key会报错 # 2.修改字典 print("修改之前:", dict['Beth']) dic ...
- springMVC项目创建及导入包项
springMVC项目创建及导入包项 - zhangzhetaojj的博客 - CSDN博客https://blog.csdn.net/zhangzhetaojj/article/details/50 ...
- JavaSE_12_Properties类和缓冲流
1.Properties类 java.util.Properties 继承于Hashtable ,来表示一个持久的属性集.它使用键值结构存储数据,每个键及其对应值都是一个字符串.该类也被许多Java类 ...
- eval(str)函数
转载:地址于http://blog.csdn.net/SeeTheWorld518/article/details/47983511 eval(str)函数很强大,官方解释为:将字符串str当成有效的 ...
- Ajax之json返回结果是集合的处理
Jquery实现ajax: $.ajax({ type //数据的提交方式:get和post url //数据的提交路径 async //是否支持 ...
- <每日一题>题目25：快速排序
''' 快速排序:分而治之,一分为二进行排序 ''' import cProfile import random def quick_sort(nums): if len(nums) <= 1: ...
- php 7.2下mcrypt扩展支持附带的问题
按照网上提供的mcrypt扩展编译支持方法,完成了扩展编译,也确实可以正常加密/解密了 但是如果php.ini中配置为: error_reporting = E_ALL display_errors ...
- 编程之法：面试和算法心得（旋转字符串java实现）
内容全部来自编程之法:面试和算法心得一书,实现是自己写的使用的是java 题目描述 给定一个字符串,要求把字符串前面的若干个字符移动到字符串的尾部,如把字符串“abcdef”前面的2个字符'a'和'b ...