CSS拾遗篇之定位体系和包含块 & html,body 的探究_css 定位和包含块_Conradine_Lian的博客-程序员秘密

技术标签: CSS  css  定位  前端  html  

绝对定位元素相对于最近的有定位的(position值为非static)父级元素定位,如果不存在满足条件的父元素,则相对于哪个元素定位 ?

若无非static祖先,是相对于初始包含块来定位的,而初始包含块并不是以html 或body 进行定位。

定位体系和包含块

  • 根元素 HTML的包含块 叫做初始包含块(initial containing block)。初始包含块的“ direction”属性与根元素相同。
  • 大多数情况下,包含块就是这个元素最近的祖先块元素的内容区

如何确定具有不同position属性的元素元素的包含块?

确定包含块的过程完全依赖于这个包含块的 position 属性,大致分为下列场景:

  1. 如果 position 属性是 static 或 relative 的话,包含块就是由它的最近的祖先块元素(比如说inline-block, block 或 list-item元素)或格式化上下文BFC(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
  2. 如果 position 属性是 absolute 的话,包含块就是由它的最近的 position 的值不是 static (fixed, absolute, relative, or sticky)的祖先元素的内边距区的边缘组成的。
  3. 如果 position 属性是 fixed 的话,包含块就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 组成的。
  4. 如果 position 属性是 absolute 或 fixed,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的:
    A transform or perspective value other than none
    A will-change value of transform or perspective
    A filter value other than none or a will-change value of filter (only works on Firefox).

确定初始包含块

图片来源于网络

案例:div绝对定位 bottom:0 ,body,html无定位的效果图如下:

在这里插入图片描述

在浏览器中,初始包含块是视口大小的矩形,是 html 的包含块

在这里插入图片描述

document.documentElement指的是 html

在这里插入图片描述
可以看出div是相对于初始包含块的,而不是 <html><body>

有滚动条时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html{
    
				width: 100%;
				height: 100%; 
				border: 1px solid red; 
			}
			#opac{
    
				width: 100%;
				height: 100px;
				background-color: #CCCCCC;
				position: absolute; 
				bottom: 0;
			}
			#d1{
    
				width: 100%;
				height: 1000px;
			} 
		</style>
	</head>
	<body>
		<div id="opac">
			
		</div>
		<div id="d1"> 
		</div>
	</body>
</html>

当有滚动条时效果是这样的:
在这里插入图片描述

bottom:0 看似并没有相对于初始包含块定位

在这里插入图片描述

而是相对于 html ?

尝试减少html宽度位80%:
在这里插入图片描述
滚动滚动条的效果:
在这里插入图片描述

由此得出:div仍然是相对于初始包含块定位的,只是我们对初始包含块的定义不够了解,初始化包含块不是viewport,只是尺寸一样

划重点: 滚动系统滚动条会影响初始包含块的位置。也就是说,初始包含块会随着滚动条移动(PS.这里的移动是指初始包含块随滚动条向上移动)

对于连续媒体,初始包含块具有视口的尺寸,并固定在画布原点;而对于分页媒体,则是一个页面的区域。我们使用的电脑屏幕属于连续媒体。

html,body 的探究

background-color

从上面的案例中引申出另一个问题:

为什么在 html 中 给 body 元素设置 css background 后全屏都有效果?

CSS 规范规定在没有单独设置 html 元素上的 background 时,直接应用 body 上的 background 属性的计算值

html未设置,body设置时;不是body的background起作用,而是body作为一个根节点起作用了,<html>标签未被激活,body担当类似于根节点的节点,其background背景色被浏览器捕获。当<html>标签无背景样式时,<body>的背景色其实不是<body>标签的背景色,而是浏览器的。
html,body都设置了背景色时;一旦设置了<html>节点的background背景色之后,<body>的背景色变成了正常的<body>标签(一个实实在在,普普通通标签)的背景色,而此时的<html>标签最顶级,背景色被浏览器获取,成为浏览器的背景色。

一般来讲,如果在标签中设置background-color属性,这种颜色就会充满整个浏览器窗口;但是如果在标签中也设置了背景色,那么body的背景色就只会填满内容区域。 ——《css实战手册》

注意:即使在html源代码中省略了body标签,body元素的规则仍将起作用,因为html解析器将推断出丢失的标签。

高度百分比
  • 如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用;
  • 如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block属性可以说是高度百分比起作用的前提条件之一。

body 和 HTML的 高度百分比显示

百度面试题:透明层无论滚动与否都满屏显示

<html><body>标签高度100%显示,同时溢出隐藏(overflow:hidden),然后用一个<div>高度100%显示,溢出滚动。而这个透明层就使用绝对定位且与这个<div>平级,高宽100%显示,就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。

默认状态下,<body>不是高度100%显示的。

解决ie6下固定定位失效的问题:用绝对定位来模拟固定定位

1.禁止系统滚动条(系统的滚动条是在文档上,而不是在html,body上)

2.将滚动条作用在最外层的包裹器上或者在body上

3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置, 所以一个按照初始包含块定位的元素就不会产生移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
    
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#opac{
    
				width: 100%;
				height: 100%;
				background-color: #CCCCCC;
				position: absolute; 
			}
			#d1{
    
				width: 100%;
				height: 100%; 
				position: absolute; 
				overflow: scroll; 
				/* 自己做了一个页面,自己加滚动条 */
				right: 0;
			}
			#d2{
    
				width: 100%;
				height: 1000px;
			}
		</style>
	</head>
	<body>
		<div id="opac">
			
		</div>
		<div id="d1">
			<div id="d2">
				
			</div>
		</div>
	</body>
</html>
body的溢出隐藏

只设置body的overflow:hidden是无法隐藏高度不足一屏的元素的(body给定一个<屏幕的宽度)。如果想要隐藏需要设置HTML的overflow:hidden。并不是说body overflow无效,而是body天然的overflow计算容器是一屏高度

文中若发现有误之处,请及时指出~

参考:
当父级是body时,子元素设置position:absolute;定位是根据body还是document呢?
对html与body的一些研究与理解
正确认识html与body
UI样式
PC浏览器关于viewport中html元素,window 对象,screen 对象的尺寸
css包含块
css初始包含块

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Conradine_Lian/article/details/109388364

智能推荐

spring核心配置文件(applicationContext.xml)并整合mybatis_俺叫啥好嘞的博客-程序员秘密

&lt;beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xml

Vue 父子组件checkbox-group值同步_vue 子组件checkbox_foxbamboo的博客-程序员秘密

子组件中有一个checkbox-group需要与父组件中的变量同步,关键代码如下:父组件:父组件中引入子组件,并设置好供子组件调用的方法import scene from "@/components/form/scene.vue"; export default { data() { return { editMode: true, form: {

c++学习笔记_c++线上笔记_ikscher的博客-程序员秘密

C陷阱与缺陷Effective C++设计模式(Design Patterns)深度探索C++对象模型深入理解计算机系统编译原理程序员修炼之通代码大全(Code Complete)算法导论(Introduction to Algorithms)重构——改善既有代码设计(Refactoring)编程之美C

mysql 获取当前日期周一和周日_mysql 某个日期的周1和周日_jerry_sun16的博客-程序员秘密

select subdate(curdate(),date_format(curdate(),'%w')-1)//获取当前日期在本周的周一  select subdate(curdate(),date_format(curdate(),'%w')-7)//获取当前日期在本周的周日  这两句语句是mysql用来取当前日期的周一或周日的一个方法,那么这句如何运作的呢?    %w 是以

java web----servlet_weixin_30448603的博客-程序员秘密

1、第一个servlet应用(可以直接创建maven项目,产生maven目录结构)导入jar包&lt;dependency&gt; &lt;groupId&gt;javax.servlet&lt;/groupId&gt; &lt;artifactId&gt;javax.servlet-api&lt;/artifactId&gt; &lt;vers...

ELK Grafana 监控Nginx_Dannyvon的博客-程序员秘密

nginx字段log_format aka_logs '{"@timestamp":"$time_iso8601",' '"host":"$hostname",' '"server_ip":"$server_addr",' '"client_ip":"$remote_addr",' '"xff":"$http_x_forwarded_for",' '"domain":"$host",' '"url":"$uri",' '"refer...

随便推点

记一次phpstudy后门漏洞复现_Animation77的博客-程序员秘密

通过查阅资料,后门代码存在于\ext\php_xmlrpc.dll模块中phpStudy2016和phpStudy2018自带的php-5.2.17、php-5.4.45phpStudy2016路径php\php-5.2.17\ext\php_xmlrpc.dllphp\php-5.4.45\ext\php_xmlrpc.dllphpStudy2018路径PHPTutorial\php...

关于3D模型中的obj文件_梅花鹿先生和他的猫的博客-程序员秘密

OBJ文件简介OBJ文件是一种标准的3D模型文件格式,适合用于3D软件模型之间的互导。 几乎所有知名的3D软件都支持OBJ文件的读写,很多游戏引擎也都支持OBJ文件的读取。 OBJ文件是一种文本文件格式,采用了单纯的字典状结构 , 可以直接用写字板打开进行查看和编辑修改。OBJ文件特征一种3D模型文件。不包含动画、材质特性、贴图路径、动力学、粒子等信息。 OBJ主要支持多边形。OB...

HTML5 新增标签和属性_康冕峰的博客-程序员秘密

HTML5新标签与特性document 约束头HTML: sublime 输入 html:4s XHTML: sublime 输入html:xt HTML5: sublime 输入 html:5字符设定&lt;meta http-equiv="charset" content="utf-8"&gt;:HTML与XHTML中建议这样去写 &lt;meta c...

如何成为黑客?_终结者ASDF的博客-程序员秘密

1、这么说,你想成为一名黑客非常赞同这一条2、不错的志向,因为...非常赞同这一条3、你需要弄一个很酷的面具,和一件笔挺的西装非常赞同这一条4、如果你是一个火辣的女孩、并梳着一个男孩的发型,那就更好了非常赞同这一条5、该死,这款发型也相当不错非常赞同这一条6、找一个很小很小的墨镜非常赞同这一条7、或者蛤蟆镜非常赞同这一...

cmder中文乱码问题_cmder乱码_dotphoenix的博客-程序员秘密

在 Windows 中安装的 cmder1.3.2,默认的客户端编码为中文简体(gbk)。如果某些命令输出的字符编码是 utf-8,就会出现中文字符乱码的问题。此时,我们可将 cmder 的字符编码改为 utf-8,来解决中文乱码的问题。有以下两种方法。临时修改 cmder 的字符编码打开cmder,运行下面的命令即可:chcpchcp 65001说明:chcp 查看当前...

半小时内使用vim的常用命令,以及平时使用的感慨_weixin_30482181的博客-程序员秘密

移动就不说了,强制退出:q!;保存退出:wq在normal模式下删除:    x删除当前字符;    v选择字符,x删;    dd删除行;    d$删除当前光标到行末;    de删除当前光标到单词末尾;    dw同上切包括空格。撤销、重做:    u撤销;    U撤销当前行所有改变;    ctrl+r 重做。-------------...

推荐文章

热门文章

相关标签