CSS学习笔记三

最新推荐文章于 2024-10-31 14:03:24 发布

Jolly-XB

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量172

点赞数

分类专栏： css学习文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40071917/article/details/120462227

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

position的常用值
position:absolute
会相对已经定位的父元素（祖先元素）进行定位，会脱离正常的文档流，不会占据任何位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
				left: 200px;
				top: 200px;
			}
			.d2{
				width: 200px;
				height: 200px;
				background-color: palevioletred;
			}
			.parent{
				width: 600px;
				height: 600px;
				background-color: darkslategrey;
				margin: 0 auto;
				position: absolute;
				left: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="d1"></div>
			<div class="d2"></div>
		</div>
	</body>
</html>

position:relative
相对于自己原本的位置进行定位，不脱离正常的文档流，改变以后依然占据着原本的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: relative;
				left: 100px;
				top: 100px;
			}
			.d2{
				width: 200px;
				height: 200px;
				background-color: palevioletred;
				display: inline-block;
			}
			.d3{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
				display: inline-block;
			}
			.parent{
				width: 600px;
				height: 600px;
				background-color: darkslategrey;
				margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="d1"></div>
			<div class="d2"></div>
			<div class="d3"></div>
		</div>
	</body>
</html>

position:fixed
fixed是以窗口来进行元素定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				width: 150px;
				height: 100px;
				background-color: paleturquoise;
				display: inline-block;
				position: fixed;
				left: calc(50% - 75px);
				top: calc(50% - 50px);	
			}
		</style>
	</head>
	<body>
		<a href="">xiao可爱在线发牌</a>
		.d1{内容$}*100
	</body>
</html>