css的定位

最新推荐文章于 2024-07-23 14:51:29 发布

Valder__

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量48

点赞数

分类专栏：前端css 文章标签： css html 前端

本文链接：https://blog.csdn.net/Valder__/article/details/127147746

版权

前端css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

相对定位：relative

绝对定位：absolute

固定定位：fixed

以上定位都可以使用top,bottom,left,right来移动

<html>
	<head>
		<title>css的定位</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#div01{
				border:solid 2px orange;
				height:300px;
				width:800px;
				margin-bottom:10px;
				margin-top:50px;
					
				/*给父级添加相对定位，就会使子标签的绝对定位变成父级的*/
				position:relative;
			}
			#showdiv{
				border:solid 3px;
				height:50px;
				width:50px;
					
				/*绝对定位
				默认参照点是网页
				若父级元素上加了position:relative;，参照点就是父级元素*/
				position:absolute;
				top:10px;
			}
			#div02{
				border:dashed 2px coral;
				height:300px;
				width:800px;
				margin-bottom:10px;
					
				/*使用相对定位，相对的是原来这个div所在的位置，再向定义的方向移动指定的位移（top,bottom,left,right）
				这个就和其他两个不在一个层级上，就可以挪位置
				前面空出的位置是可以写东西的*/
				position:relative;
				left:100px;
				top:100px;
					
				background-color:coral;
				z-index:2
			}
			#div03{
				border:solid 2px gray;
				height:300px;
				width:800px;
				margin-bottom:10px;
					
				position:relative;
					
				background-color:gray;
				z-index:3;
			}
			#div04{
				border:solid 2px blue;
				height:50px;
				width:50px;
					
				/*固定定位
				将元素固定显示在页面的指定位置，不会随着滚动条的滚动而移动*/
				position:fixed;
				top:270px;
				right:10px;
			}
				
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="showdiv">
					
			</div>
		</div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
	</body>
</html>