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 按下鼠标不松 ...
随机推荐
- vc 获取窗口标题GetWindowText
今天在写一个模块,具体功能是想时刻监控用户当前活动窗口,需要获取窗口标题以及其它相关信息,记得API GetWindowText就是用来做这个的,结果试了半天,有的获取成功了有的获取失败了,而且有关汉 ...
- leetcode-92-反转链表②
题目描述: 方法一: class Solution: def reverseBetween(self, head: ListNode, m: int, n: int) -> ListNode: ...
- 【9.14NOIP模拟pj】wtaxi 题解——搜索
[9.14NOIP模拟pj]wtaxi 题目简化 有K辆车,N个人,上车给D元,只有S分钟.上车后无论多少人都要给D元,原地等多少分钟就没了多少元.求最小花费的钱. 我的思路 毫无疑问,此题可以用搜索 ...
- 【JZOJ3316】非回文数字
description 如果一个字符串从后往前读与从前往后读一致,我们则称之为回文字符串.当一个数字不包含长度大于1的子回文数字时称为非回文数字.例如,16276是非回文数字,但17276不是,因为它 ...
- 廖雪峰Java13网络编程-3其他-1HTTP编程
1.HTTP协议: Hyper Text Transfer Protocol:超文本传输协议 基于TCP协议之上的请求/响应协议 目前使用最广泛的高级协议 * 使用浏览器浏览网页和服务器交互使用的就是 ...
- 廖雪峰Java12maven基础-2maven进阶-1使用插件
1.maven的Lifecycle,Phase和Goal: 使用maven构建项目就是执行Lifecycle 执行Lifecycle就是按顺序执行一系列Phase 每执行一个Phase,都会执行该Ph ...
- cache方法用于查询缓存操作，也是连贯操作方法之一。
cache方法用于查询缓存操作,也是连贯操作方法之一. cache可以用于select.find和getField方法,以及其衍生方法,使用cache方法后,在缓存有效期之内不会再次进行数据库查询操作 ...
- LUOGU P1438 无聊的数列 (差分+线段树)
传送门 解题思路 区间加等差数列+单点询问,用差分+线段树解决,线段树里维护的就是差分数组,区间加等差数列相当于在差分序列中l位置处+首项的值,r+1位置处-末项的值,中间加公差的值,然后单点询问就相 ...
- c语言学习笔记 - 结构体位域
在学习结构体的时候遇到了位域这个概念,位域主要是为了节省内存空间,比如用一个32位,4个字节的int存储一个开关变量时,会造成空间浪费,于是干脆就考虑在这个32划分不同的区域来存储数据,例如划出1位存 ...
- Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...