定位的小细节

最新推荐文章于 2025-11-23 18:54:45 发布

原创最新推荐文章于 2025-11-23 18:54:45 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

1.static 静态（默认）
2.relative 相对定位
相对于自己的父元素占据自己原来位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background-color: #0000FF;
				position: relative; 
				/* position: absolute; */
				top: 50px;
				/* margin-top: 200px; */
			}
			.div2{
				width: 200px;
				height: 200px;
				background-color: #008000;
				position: relative;
				top: 50px;
				/* 相对定位会随着父元素的一定移动 */
			}
			
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				11
			</div>
			
		</div>
	</body>
</html>

absolute 绝对定位
脱离文档流
相对于最近的定位如果没有就相对于body
不占据自己原来的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background-color: #0000FF;
				position: relative; 
				/* position: absolute; */
				top: 50px;
				/* margin-top: 200px; */
			}
			.div2{
				width: 200px;
				height: 200px;
				background-color: #008000;
				position: relative;
				top: 50px;
				/* 相对定位会随着父元素的一定移动 */
			}
			.div3{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				position: absolute;
				top: 100px;
				/* 绝对定位会脱离文档流 如果父元素或者祖元素出现定位 就会以上面的定位做为标准*/
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				11
			</div>
			<div class="div3">
				22
			</div>
			<div class="div4">
				33
			</div>
		</div>
	</body>
</html>

fixed 固定定位脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background-color: #0000FF;
				position: relative; 
				top: 50px;
				height: 2000px;
			}	
			.div3{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				position: fixed;
				top: 100px;
				/* fixed 固定定位 脱离文档流*/
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
			<div class="div3">
				22
			</div>
		</div>
	</body>
</html>

sticky 滚动位置定位

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div {
      height: 2000px;
      width: 100%;
    }
	.box1{
		width: 100%;
		height: 50px;
		background: red;
	}
    .box2 {
      width: 200px;
      height: 300px;
      background-color: black;
    }
    .style {
      position: sticky;
      top: 50px; 
	  /* 始终距离网页上面50px */
    }
  </style>
</head>
<body>
  <div class="div">
		<div class="box1"></div>
		<div class="box2 style"></div>
  </div>
</body>
 
</html>

被设置的盒子始终距离上面的距离不变
z-index 重叠元素