定位

最新推荐文章于 2021-04-26 11:38:27 发布

高鹏飞白羊

最新推荐文章于 2021-04-26 11:38:27 发布

阅读量67

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/101060786

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

css定位

1，定位属性：position
值
static：默认值，静态------》默认文档流
relative 相对定位
absolute 绝对定位
fixed 固定定位
元素的position设置为relative/absolute/fixed中任意一个值，该元素被称为已定位元素
2，偏移属性
top/bottom/right/left
left:100px 距离左边100个像素
top:100px 距离顶部100px

3，相对定位
在这里插入图片描述
鼠标放在图片上向左上悬停：

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		div{
			width:80px;
			border:1px solid red;
			background:#f00;
			float:left;
			margin-left:30px;
			margin-right:80px;
			padding-left:80px;
			padding-right:30px;
			margin-top:100px;
			margin-bottom:100px;
		}
		.pin:hover{
			position:relative;
			left:-12px;
			top:-5px;
		}
		.set:hover{
			position:relative;
			left:-25px;
			top:-5px;
		}
		.school:hover{
			position:relative;
			left:-25px;
			top:-5px;
		}
		.price:hover{
			position:relative;
			left:-35px;
			top:-5px;
		}
	</style>
	</head>
	<body>
		<div class="pin">
			<img src="../img/icon1.png" alt="">
			<h3>品质保障</h3>
		</div>
		<div class="set">
			<img src="../img/icon2.png" alt="">
			<h3>私人订制</h3>
		</div>
		<div class="school">
			<img src="../img/icon3.png" alt="">
			<h3>学院特工</h3>
		</div>
		<div class="price">
			<img src="../img/icon4.png" alt="">
			<h3>专属特权</h3>
		</div>		
	</body>
</html>

4，绝对定位

在这里插入图片描述
一般relative作为absolute的祖先元素


```css
<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}
		div{
			width:100px;
			height:100px;
		}
		#d1{background:#f00;z-index:1;}
		#d2{background:#0f0;
			position:absolute;
			left:100px;	
		}
		#d3{
			background:#00f;
					
		}
		#parent{
			width:400px;
			height:400px;
			border:2px solid #f00;
			margin:0px;
			position:relative;
			}
		#grantpa{
			width:600px;
			height:600px;
			border:2px solid #00f;
			margin:0px;
			position:relative;
			}
	</style>
	</head>
	<body>
		<div id="grantpa">
			<div id="parent">
				<div id="d1"></div>	
				<div id="d2"></div>	
				<div id="d3"></div>	
			</div>
		</div>
	</body>
</html>


## 固定定位









```css
<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
	*{margin:0;padding:0}
		div{
			width:100px;
			height:100px;
		}
		#d1{background:#f00;z-index:1;}
		#d2{background:#0f0;
			position:absolute;
			left:100px;	
		}
		#d3{
			background:#00f;
					
		}
		#parent{
			width:400px;
			height:400px;
			border:2px solid #f00;
			margin:0px;
			position:relative;
			}
		#grantpa{
			width:600px;
			height:600px;
			border:2px solid #00f;
			margin:0px;
			position:relative;
			}
			#d5{
				width:800px;
				margin:0 auto;
				height:1500px;
				background:#e8e8e8;
			}
			span{
				background:#0ff;
				width:50px;
				height:200px;
				position:fixed;
				top:200px;
			}
			#s1{
				left:10px;
			}
			#s2{
				right:10px;
			}
	</style>
	</head>
	<body>
	<!--固定定位	-->
		<span id=s1"></span>
		<span id=s2"></span>
		<div id="d5">
			jdbc.url=jdbc:mysql:// iftttrule-db.uhome.haier.net:3306/iftttrule?useUnicode=true&amp;characterEncoding=UTF-8 jdbc.url=jdbc:mysql:// iftttrule-db.uhome.haier.net:3306/iftttrule?useUnicode=true&amp;characterEncoding=UTF-8 jdbc.url=jdbc:mysql:// iftttrule-db.uhome.haier.net:3306/iftttrule?useUnicode=true&amp;characterEncoding=UTF-8 jdbc.url=jdbc:mysql:// iftttrule-db.uhome.haier.net:3306/iftttrule?useUnicode=true&amp;characterEncoding=UTF-8
		</div>
		<div id="grantpa">
			<div id="parent">
				<div id="d1"></div>	
				<div id="d2"></div>	
				<div id="d3"></div>	
			</div>
		</div>
	</body>
</html>

堆叠顺序

在这里插入图片描述

高鹏飞白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位

css定位1，定位属性：position值static：默认值，静态------》默认文档流relative 相对定位absolute 绝对定位fixed 固定定位元素的position设置为relative/absolute/fixed中任意一个值，该元素被称为已定位元素2，偏移属性top/bottom/right/leftleft:100px 距离左边100个像素top:...
复制链接

扫一扫