034_CSS绝对定位

最新推荐文章于 2022-04-06 17:59:31 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-04-06 17:59:31 发布

阅读量219

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109126404

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的绝对定位，包括如何将元素从文档流中移除并相对于其包含块定位。绝对定位元素不占据空间，可通过z-index控制叠加顺序。示例代码展示了如何使用绝对定位及z-index属性改变元素的堆叠和位置。同时，还探讨了clip属性用于剪裁绝对定位元素的方法，通过rect()函数设定可见区域。

摘要由CSDN通过智能技术生成

1. 设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位, 包含块可能是文档中的另一个元素或者是初始包含块(body)。元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样。元素定位后生成一个块级框, 而不论原来它在正常流中生成何种类型的框。

2. CSS绝对定位

2.1. 绝对定位使元素的位置与文档流无关, 因此不占据空间。这一点与相对定位不同, 相对定位实际上被看作普通流定位模型的一部分, 因为元素的位置相对于它在普通流中的位置。

2.2. 普通流中其它元素的布局就像绝对定位的元素不存在一样:

#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

2.3. 如下图所示:

2.4. 绝对定位的元素的位置相对于最近的已定位祖先元素, 如果元素没有已定位的祖先元素, 那么它的位置相对于最初的包含块。

2.5. 根据用户代理的不同，最初的包含块可能是画布或 html 元素。

2.6. 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

3. 绝对定位例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>绝对定位</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				width: 400px;
				height: 200px;
				
			}
			.img1 {
				background: red;
			}
			.img2 {
				background: blue; 
			}
			.img3 {
				background: green;
			}
			.img2.img2-1 {
				position: absolute; 
				top: 20px; 
				left: 30px;
			}
			.img2.img2-2 {
				position: absolute; 
				top: 20px; 
				left: 30px;
			}
		</style>
	</head>
	<body>
		<div style="background: yellow;">
			<img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-1" /><img src="RefreshBtn.png" class="img3" />
		</div>
		<div style="background: pink; position: relative;">
			<img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-2" /><img src="RefreshBtn.png" class="img3" />
		</div>
	</body>
</html>

3.2. 效果图

4. z-index属性

4.1. 定义和用法

4.1.1. z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

4.1.2. 元素可拥有负的z-index属性值。

4.1.3. z-index仅能在定位元素上奏效(例如: position: absolute;)。

4.1.4. 该属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为正数, 则离用户更近, 为负数则表示离用户更远。

4.2. 默认值

4.3. 可能的值

4.4. 例子

4.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>z-index属性</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				background-color: #00FFFF;
				width:150px;
				height:150px;
			}
			img	{
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<div></div>
		<img src="CrashBtn.png" />
	</body>
</html>

4.4.2. 效果图

5. clip属性

5.1. clip属性剪裁绝对定位元素。

5.2. 默认值

5.3. 可能的值

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>剪裁绝对定位元素</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				width: 300px; 
				height: 300px; 
				border: 1px solid red;
			}
			img {
				position: absolute; 
				clip: rect(0, 60px, 100px, 0); 
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div><img src="CrashBtn.png" alt="CrashBtn.png" /></div>
	</body>
</html>

5.4.2. 效果图