position定位的介绍及父相子绝在布局中的应用

淼清风
596 阅读3分钟

@toc

position定位介绍

relative 相对定位

  • 通过top、left、right、bottom设置的值，进行偏移。不会导致元素脱离文档流，只会让元素在原来位置上进行偏移。

应用场景

  • 实现元素的微调，不影响元素后面的元素
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		.father{
			width:600px;
			height:600px;
			background:aqua;
		}
		.child1{
			width:100%;
			height:100px;
			background:#f30;
			float:left;
		}
		.child2{
			background:#490;
			position:relative;
			left:50px;
			width:50%;
			height:100px;
			float:left;
		}
		.child3{
			background:#008282;
			width:50%;
			height:100px;
			float:left;
		}
	</style>
</head>
<body>
<div class="father">
	<div class="child1"></div>
	<div class="child2"></div>
	<div class="child3"></div>
</div>
</body>
</html>

页面显示为： 在这里插入图片描述 第二行右边的元素没有掉下来，如果设置margin就会掉下来，不回影响布局

position绝对定位

  • 元素设置为绝对定位时，包含块发生变化，找祖先中第一个定位元素，该元素的填充盒为其包含块，如果没有找到，它的包含块为整个网页（初始化包含块）

应用场景

  • 所有需要脱离文档流的地方均可使用
  • 以二级菜单为例
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		.father{
			width:600px;
			height:600px;
			background:aqua;
			
		}
		.father  ul li{
			list-style-type: none;
			width:100px;
			height:50px;
			background:#ccc;
			text-align:center;
		}
		.father ul li:hover .second_menu{
			display: block;
		}
		.second_menu{
			display:none;
			position:absolute;
			left:100px;
			top:30px;
		}
	</style>
</head>
<body>
<div class="father">
	<ul>
		<li>金融产品
			<ul class="second_menu">
				<li>政策指南</li>
				<li>关于我们</li>
				<li>讨论专区</li>
			</ul>
		</li>
		<li>金融机构
			<ul class="second_menu">
				<li>政策指南</li>
				<li>关于我们</li>
				<li>讨论专区</li>
			</ul>
		</li>
		<li>经销商
			<ul class="second_menu">
				<li>政策指南</li>
				<li>关于我们</li>
				<li>讨论专区</li>
			</ul>
		</li>
		<li>更多
			<ul class="second_menu">
				<li>政策指南</li>
				<li>关于我们</li>
				<li>讨论专区</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

页面显示为： 在这里插入图片描述

fixed固定定位

  • 其他情况与绝对定位一样
  • 但包含块不同，固定定位的包含块为视口

应用场景

  • 需要以视口为包含块的地方均可使用
  • 以悬浮栏为例
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		.father{
			width:200px;
			height:100%;
		}
		.fixed{
			width:200px;
			height:300px;
			background:aqua;
			position: fixed;
			left:0px;
			top:100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="fixed">
	</div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

页面显示为： 在这里插入图片描述 当拖动滚动条的时候，蓝色的元素仍停留在距顶部100px的地方

父相子绝布局方法

父相子绝定位方法介绍

  • 把父元素设置为相对定位，子元素设置为绝对定位

应用场景

  • 在不脱离文档流的情况下，改变元素的位置。该方法不会影响页面的整体布局结构，子元素会以父元素做参考点，可以在父元素内随意设置子元素的位置。
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		.father{
			width:600px;
			height:600px;
			background:aqua;
			position: relative;
		}
		.child{
			position: absolute;
			left:30%;
			top:40%;
			width:100px;
			height:100px;
			background:#f30;
			float:left;
		}
		
	</style>
</head>
<body>
<div class="father">
	father
	<div class="child">
		child
	</div>
</div>
</body>
</html>

页面显示为： 在这里插入图片描述

总结

position属性可以单独应用在脱离文档流的地方，也可以组合使用实现其他的布局。 父相子绝布局方法仅为本人在布局中的常用方法，flex也可以实现同样的效果，可以在实际运用中灵活选择。

avatar
文章
阅读
粉丝