CSS中的position属性以及圣杯布局

最新推荐文章于 2024-07-08 11:32:20 发布

CHHfff

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量125

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42136519/article/details/107142673

版权

CSS中的position属性

1.position:relative;相对位置：
2.position:absolute;绝对位置：相对于窗口，与父元素所处位置无关
3.position：fixed：固定位置：位置方位与absolute类似，设置了fixed属性后屏幕滑动对应的元素会跟着屏幕滚动并且处于固定位置
4.position:inherit:继承位置，会继承父元素position的属性值
5.z-index：设置层级，层级高的会覆盖层级低的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				width: 100%;
				height: 3000px;
			}
			.a{
				border: 1px solid red;
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				left: 200px;
				top: 100px;
				z-index: 1;
			 }
			 .a .i{
			 	border: 1px solid red;
				width: 10px;
				height: 10px;
				background: green;
				position: relative;
				left: 50px;
				top: 50px;
			 }
			 .b{
			 	border: 1px solid blue;
			 	width: 100px;
			 	height: 100px;
			 	background-color: blue;
			 	position: relative;
			 	left: 200px;
			 }
			 .c{
			 	width: 100px;
			 	height: 100px;
			 	background-color: green;
			 	position: absolute;
			 	right: 100px;
			 }
			 .d{
			 	width: 100px;
			 	height: 100px;
			 	background-color: purple;
			 	position: fixed;
			 	left: 0;
			 	top:0;
			 }
			 .f{
			 	width: 100px;
			 	height: 100px;
			 	background-color: pink;
			 	position: inherit;
			 	right: 100px;
			 	top:0;
			 }
			 .h{
			 	border: 1px solid red;
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
				left: 100px;
				
			 }
		</style>
	</head>
	<body>
		<div class="a"><div class="i"></div></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"><div class="f">d的儿子</div></div>
		<div class="h"></div>
	</body>
</html>

圣杯布局

左中右布局，左右宽度固定为100，中间自适应宽度，并且先加载中间块`

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#a{
				height: 100px;
				background-color: red;
				margin-left: 200px;
				margin-right: 200px;

			}
			#b{
				height: 100px;
				width: 200px;
				background-color: green;
				position: absolute;
				left: 0;
				top: 0;
			}
			#c{
				height: 100px;
				width: 200px;
				background-color: pink;
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="a">
			中间
		</div>
		<div id="b">
			左边
		</div>
		<div id="c">
			右边
		</div>
</html>

CHHfff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的position属性以及圣杯布局

CSS中的position属性1.position:relative;相对位置：2.position:absolute;绝对位置：相对于窗口，与父元素所处位置无关3.position：fixed：固定位置：位置方位与absolute类似，设置了fixed属性后屏幕滑动对应的元素会跟着屏幕滚动并且处于固定位置4.position:inherit:继承位置，会继承父元素position的属性值5.z-index：设置层级，层级高的会覆盖层级低的。<!DOCTYPE html><h
复制链接

扫一扫