CSS布局：relative、absolute

最新推荐文章于 2023-10-21 09:42:12 发布

WuQideveloper

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量123

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_34500944/article/details/102621197

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css中相对定位和绝对定位

属性为position
取值：static（默认）
relative
absolute
fixed

relative

相对定位没有脱离默认文档流，页面上还占位，后面元素不会补位。需要配合偏移属性：top/bottom/left/right使用，以px为单位；如果不使用偏移属性，不会有任何效果。

是相对于原来的位置做偏移

使用时机：1、在做元素微调时候使用 2、为绝对定位提供目标

absolute

绝对定位脱离默认文档流（会使元素变为块级），页面不占位置，后面元素上前补位
绝对定位的位移参照物是离他最近的已定位祖先元素，实现位置初始化，如果没有祖先元素，相对于body实现位置初始化。

使用时机：1、有堆叠效果的布局 2、弹窗、弹菜单绝对定位

使用示例：

<!DOCTYPE html>
<html>
<head>
	<title>1ex</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#d1{
			width: 1000px;
			height: 400px;
			background: #0f0f0f;
			position: relative;
			background: #EDE5EF;

		}
		#d2{
			width: 500px;
			height: 380px;
			position: absolute;
		}
		#d3{
			width: 400px;
			height: 380px;
			position: absolute;
			left: 500px;
		}
		.desc{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 109px;
			left: 57px;
		}
		.im{
			width: 300px;
			height: 230px;
			position: absolute;
			top: 73px;
			left: 135px;
		}
		p.pname{
			font-size: 20px;
		}
        p.details{
        	font-size: 10px;
        }
        p.price{
        	color: #4CA0EC;
        	font-size: 15px;
        }
        a.view{
        	float: left;
        	width: 100px;
        	height: 35px;
        	border-radius: 2px;
        	background-image: linear-gradient(to bottom,#4A9DE8 0%,#458FCF 100%);
        	text-decoration: none;
        	text-align: center;
        	line-height: 35px;
        	color: white;
        }
	</style>
</head>
<body>
  <div id="d1">
  	<div id="d2">
  		<div class="desc">
  			<p class="pname">Apple MacBook系列</p>
  			<p class="details">Apple双核处理器256GB SSD 8G内存英特尔HD显卡620含共享显卡内存</p>
  			<p class="price">&yen6988.00</p>
  			<a class="view" href="#">查看详情</a>
  		</div>
  			<img class="im" src="img1.png">
  	</div>
  	<div id="d3">
  		<div class="desc">
  			<p class="pname">惠普系列</p>
  			<p class="details">双核处理器512GB 4G内存英特尔HD独立显卡</p>
  			<p class="price">&yen3488.00</p>
  			<a class="view" href="#">查看详情</a>
  		</div>
  		<img class="im" src="img2.png">
  	</div>
  </div>
</body>
</html>