html/css定位

最新推荐文章于 2023-07-06 14:04:01 发布

a201865110162

最新推荐文章于 2023-07-06 14:04:01 发布

阅读量162

点赞数

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

本文链接：https://blog.csdn.net/a201865110162/article/details/107871055

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

	position(位置):
		相对定位:relative
			相对元素相对于自己原来的位置移动指定的距离
			可以使用:top、left、right、bottom进行设置
			注意:
				不影响其他的元素
		绝对定位:absolute
			绝对定位是参照界面或者父元素进行移动
		固定定位：fixed
				固定定位是相对于整个界面而言的不随着滚动条的移动而移动
		z-index:元素的显示级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
	</head>
<style>
	
	#top{
		width: 600px;
		height: 200px;
		border: solid 3px;
		position: relative;//相对定位
		left: 30px;
		background-color: mediumaquamarine;
	}
	#neck{
		width: 600px;
		height: 200px;
		border: solid 3px;
		margin: 10px;
		background-color:#8B4513;
		position:absolute;//绝对定位
		right: 200px;
		top: 500px;
		z-index: 1;//显示级别
	}
	#forter{
		width: 600px;	
		height: 200px;
		border: solid 3px;
		margin:10px;
		background-color: aqua;
		position:absolute;
		top: 400px;
		z-index: 1;
	}
	#con{
		border:solid saddlebrown 2px;
		width: 20px;
		height: 30px;
		background-color: #8B4513;
		position: fixed;//固定定位
		top: 270px;
		right: 20px;
		
	}
</style>
<body>
	<div id="top"></div>
	
	<div id="neck">
		<div id="con">
			
		</div>
	</div>
	<div id="forter"></div>

</body>
</html>