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 按下鼠标不松 ...
随机推荐
- 01.MyBatis快速入门
1.下载jar包 Mybatis包+数据库驱动包 https://github.com/mybatis/mybatis-3/releases 2.新建Java工程并导入jar包 3.创建数据库与表 C ...
- PHP如何打造一个高可用高性能的网站呢？
https://blog.csdn.net/jwq101666/article/details/80162245 1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的n ...
- js页面的弹框怎么关闭啊
1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){d ...
- sql不用拼接语句实现动态查询条件
DECLARE @oFrom INT SELECT * FROM baseinfo AND ( ( and Type = 'Breakfast') ) or的条件可自由添加,尤其适用互斥条件的查询.
- Docker在线文档收集
极客学院 kubernetes中文社区 易百教程
- SpringBoot 03_利用FastJson返回Json数据
自上一节:SpringBoot 02_返回json数据,可以返回json数据之后,由于有些人习惯于不同的Json框架,比如fastjson,这里介绍一下如何在SpringBoot中集成fastjson ...
- Django的日常-路由层
目录 Django的日常-2 路由层 有名分组和无名分组 反向解析 路由的分发 Django的日常-2 路由层 我们之前已经接触过路由层,只是我们可能不知道他叫这个名字,实际上在Django里面路由层 ...
- 提前关闭Scrapy爬虫的设置
Scrapy的CloseSpider扩展会在满足条件时自动终止爬虫程序.可以设置CLOSESPIDER_TIMEOUT(秒).CLOSESPIDER_ITEMCOUNT.CLOSESPIDER_PAG ...
- osg::BlendFunc来设置透明度
osg::BlendFunc介绍 混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一像素位置原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果. 假设我们需要 ...
- springcloud之配置中心用法
一.配置文件服务器server端 1.构建server端所需jar <dependencies> <dependency> <groupId>org.springf ...