快速了解CSS绝对定位和相对定位

最新推荐文章于 2022-09-29 15:06:48 发布

原创最新推荐文章于 2022-09-29 15:06:48 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中绝对定位（absolute）和相对定位（relative）的区别，通过实例演示了如何在HTML结构中使用它们，并展示了如何配合盒模型和布局调整元素位置。

绝对定位

我们都知道CSS定位有很多，今天我们来简单了解绝对定位（absolute）和相对定位（relative）
1绝对定位（absolute）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

2相对定位（relative）
相对定位元素经常被用来作为绝对定位元素的容器块。

h2.pos_top
{
    position:relative;
    top:-50px;
}

下边我们用一个实例来举例说明

<body>
		<div class="conter">
			aaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
		
		<div class="boxs">
			aaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
					
			
			<div class="box1">
				
			</div>
		</div>
		</div>

运行图在这里插入图片描述
加上绝对定位后

<style type="text/css">
			.conter
			{
				border: 1px solid black;
				width: 800px;
				height: 800px;
				margin: auto;
			}
			.boxs{
				/*	相对定位不脱离文本内容*/
				
				
				border: 1px solid black;
				width: 500px;
				height: 500px;
			}
			.box1{
				background-color: sandybrown;
				height: 200px;
				width: 200px;
				/*	绝对定位脱离文本内容*/
				position: absolute;
				top: 50px;
				left: 50px;
				/*设置透明度*/
				background-color: rgba(0,0,0,0.4);
				
			}
		</style>