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 按下鼠标不松 ...
随机推荐
- 深入理解Java虚拟机（程序编译与代码优化）
文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...
- Data Dependency
https://en.wikipedia.org/wiki/Data_dependency (There’s some misleading expression on the flow/data d ...
- UOJ450 复读机
题意:n个位置,k种颜色.求有多少种方案使得每种颜色恰出现d的倍数次. 解:d=1就快速幂,n,k很小就DP,记得乘组合数来分配位置. d = 2 / 3的时候,考虑生成函数. f(x) = ∑[d ...
- HZOI20190725 B 回家 tarjan
题目大意:https://www.cnblogs.com/Juve/articles/11226266.html 题解: 感觉挺水的,但考场上没打出来 题目翻译一下就是输出起点到终点必经的点 其实就是 ...
- C语言利用动态数组实现顺序表（不限数据类型）
实现任意数据类型的顺序表的初始化,插入,删除(按值删除:按位置删除),销毁功能.. 顺序表结构体 实现顺序表结构体的三个要素:(1)数组首地址:(2)数组的大小:(3)当前数组元素的个数. //顺序表 ...
- centos6 php7 安装 memcache 和 memcached
下载安装memcache 注意:官网的memcache包,暂时好像不支持php7.所以到下面地址下载memcache包,切换到php7分支 php7 memcache github 下载地址 官网下载 ...
- 条件渲染v-if
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- .Net Email操作类
using System; using System.Text; using System.Net.Mail; using System.Net; using System.Linq; using S ...
- mybatis的Example的使用
MyBatis的Mapper接口以及Example的实例函数及详解 一.mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserEx ...
- 2019-8-31-dotnet-启动-JIT-多核心编译提升启动性能
title author date CreateTime categories dotnet 启动 JIT 多核心编译提升启动性能 lindexi 2019-08-31 16:55:58 +0800 ...