消除绝对定位的影响

最新推荐文章于 2022-10-09 14:59:57 发布

qq_26673953

最新推荐文章于 2022-10-09 14:59:57 发布

阅读量6.9k

点赞数

应用:

页头绝对定位,同级元素被覆盖

页头绝对定位,内容随页面滚动

正常三个div块:

当第一个元素绝对定位后,元素被覆盖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>绝对定位</title>
  </head>
  
<body>
	<div style="background-color:blue;height:100px;width:50%;position:fixed;"></div>
	<div style="background-color:pink;height:200px;width:30%;"></div>
	<div style="background-color:yellow;height:300px;width:40%"></div>
</body>
</html>

若想像图一展示,解决办法:同级元素相对定位,定位width根据绝对定位的高度来定.

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>绝对定位</title>
  </head>
  
<body>
	<div style="background-color:blue;height:100px;width:50%;position:fixed;"></div>
	<div style="position:relative;top:100px;">
		<div style="background-color:pink;height:200px;width:30%;"></div>
		<div style="background-color:yellow;height:300px;width:40%"></div>
	</div>
</body>
</html>