定位

最新推荐文章于 2025-06-04 19:10:40 发布

原创最新推荐文章于 2025-06-04 19:10:40 发布

· 114 阅读

0 ·

版权

文章标签：

#定位 #css #css3

CSS权威指南笔记专栏收录该内容

3 篇文章

订阅专栏

容纳块
对于非根元素来说，position:relative/static 容纳块是父元素
对于非根元素来说，position:absolute 容纳块是 position 不是static 的祖辈元素
容纳块的边缘时padding

tips:position:absolute其实也可以设置大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="head"></div>
		<div class="two"></div>
	</body>
</html>
<style>
	body{
		width: 100%;
		height: 100rpx;
		margin: 20px;
		border: #0000FF 1px solid;
	}
	.head{
		border: #FF0000 1px solid;
		position: absolute;
		top: 50%;
		left: 50%;
		bottom: 0;
		right: 0;
	}
</style>

.head 其实是没有大小的，通过position:absolute对四条边的定位，拉伸出了大小设定

内容溢出和裁剪

1.属性：Overflow 属性值 visible | hidden | scroll | auto

visible 是默认值，也就是溢出的部分可视，但是不影响容纳块的大小
scroll 溢出的变成滚动部分，但是如果不溢出，也会出现滚动条(没有滑动块不可用)有时候会影响布局，并且body如果设置overflow是不起作用的
auto 在必要的时候滚动

元素的可见性

属性名： visibility 属性值： visible | hidden | collapse

tips:

visibility:hidden 和 display:none 的区别，前者还在文档中 = opacity:0 后者直接从文档中删除
visibility 属性是可以继承的，父元素 hidden 但是子元素可以通过 visibility:visible 显示子元素

置换元素和非置换元素
置换元素：

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

非置换元素

HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

<!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
<span> hello world </span>

绝对定位

1.当位置信息为空\auto的时候：元素会定位到静态位置，其实也就是该在哪就在哪，保持不动的感觉。
2.非置换元素的位置和尺寸问题
首先要明确容纳块的宽度=所有的margin padding border left right width 相加的和

如果其中的left width right 都设置称auto, 不会出现居中的效果，在从左到右的语言中，会根据静态文档位置确定 left 的值，width 设置成 fit-content,right 填补其他值满足上面的式子
如果只有左右margin设置成 auto 就出现居中效果
左右margin 和 left right 都是 auto 的话则还是按照静态文档位置放置
如果 left right 只有一个是auto 的话，则按照非auto的布局先，然后在设置auto的属性调整
如果left right 均不是auto，且宽度不合法的情况下，从左到右的语言忽略right；反之
3.置换元素的位置和尺寸问题
置换元素自己拥有内置尺寸 (其实就是fit-content叭，咱非置换元素也有)
规则：
- width:auto 则 width 就是内在宽度
- left:auto 则替换为静态文档位置和非置换元素的位置规则是一样的
- 如果 left \ right 的值为 auto 则 margin-left \ margin-right 的值修改成 0（啥意思？？）
- 如果margin-left 和 margin-right 仍为 auto ，则居中显示
- 最后，如果还有一个属性的值为auto,则会被修改满足等式

z轴上的位置
tips:
子元素永远在父元素上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="a">
			<div class="aaa"></div>
		</div>	
	</body>
</html>
<style>
	.a{
		width: 800px;
		height: 800px;
		background-color: #FF0000;
		z-index: 999;
	}
	.aaa{
		width: 200px;
		height: 200px;
		background-color: #00FF00;
		z-index: 1;
	}
</style>

结果：
在这里插入图片描述
2.如果被遮住的图片的 position 没有设置成可堆叠的形式如 absolute 的话，则不论被遮住的图片的 z-index 多大都没用
3.堆叠的时候也拼爹，父元素的 z-index 比别人小了自己的 z-index 再高也没用，是一个局部的概念
4.z-index:auto — z-index:0