CSS学习Day8之定位-CSDN博客

本文链接：https://blog.csdn.net/m0_50847715/article/details/111563793

定位

相对定位

不脱离标准文档流，可以调整元素
参考点：以原来的位置为参考点

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相对定位</title>
	<style type="text/css">
		body{
			border: 1px solid orange;
		}
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.one{
			background-color: red;
			position: relative;/*相对定位*/
			top: 30px;
			left: 100px;
		}
		div.two{
			background-color: green;
		}
		div.three{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="one">One</div>
	<div class="two">Two</div>
	<div class="three">Three</div>
</body>
</html>

绝对定位

脱离标准文档流，不在页面上占位置
层级提高，有压盖现象
参考点：
- 单独给一个盒子设置绝对定位，以根元素页面左上角为参考点
- 相对于最近的非static祖先元素定位，那么以根元素页面左上角为参考点
布局方案：子绝父相

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>
	<style type="text/css">
		body{
			border: 1px solid orange;
		}
		.father{
			border: 1px solid black;
			position: relative;/*相对定位*/
			top: 30px;
			left:60px;
		}
		.one,.two,.three{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.one{
			background-color: red;
			position: absolute;
			top: 200px;
			left: 200px;
		}
		div.two{
			background-color: green;
			width: 400px;
		}
		div.three{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="one">One</div>
		<div class="two">Two</div>
		<div class="three">Three</div>
	</div>
</body>
</html>

小米搜索实战应用

body{
	margin: 0;
}
.site-header{
	width: 100%;
	height: 100px;
}
.container{
	width: 1226px;
	margin: 0 auto;
}
/*以下为logo的属性*/
.site-header .nav-logo{
	float: left;
	margin-top: 25px;
}
.nav-logo a{
	display: block;
	width: 56px;
	height: 56px;
}
.nav-logo img{
	width: 56px;
	height: 56px;
}
/*以下为列表的属性*/
.site-header .nav-list ul{
	list-style: none;/*清除li标签前面的点*/
	float: left;
	width: 820px;
	height: 88px;
	padding:12px 0 0 30px;
	margin: 0;
}
.nav-list li{
	float: left;
}
.clearfix::after{/*解决浮动带来的破坏性*/
	content: '';
	clear: both;
	display: block;
}
.nav-list a{
	text-decoration: none;
	color: #333;
	padding: 28px 10px 38px;
	display: block;
}
.nav-list a:hover{
	color: #ff6700;
}
/*以下为搜索框的属性*/
.site-header .site-search{
	float: right;
	width: 296px;
	margin-top: 25px;
}
.site-search form{
	position: relative;/*相对定位*/
	width: 296px;
	height: 50px;
}
.site-search form .content{
	width: 223px;
	height: 48px;
	border: 1px solid #e0e0e0;
	padding: 0 10px;/*其实将左右边框撑大了*/
	float: left;/*清除空白折叠带来的影响*/
	outline-color: #ff6700; 
}
.site-search form .border:hover{
	border-color: #b0b0b0;
}
.site-search form .search{
	width: 51px;
	height: 51px;
	border: 1px solid #e0e0e0;
	float: left;/*清除空白折叠带来的影响*/
	margin-left: -1px;
	font-size: 20px;
	padding: 0px;
}
.site-search form .search:hover{
	background-color: #ff6700;
	border-color: #ff6700;
	outline-color: #ff6700;
}
.site-search form .search_hot_word{
	position: absolute;/*绝对定位*/
	top: 16px;
	right: 70px;
	font-size: 14px;
}
.site-search form .search_hot_word span{
	background-color: #eee;
	color: #757575;
}
.site-search form .search_hot_word span:hover{
	cursor: pointer;/*指针悬浮到span标签时变为小手*/
	background-color: #ff6700;
	color: #fff;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米导航栏</title>
	<link rel="stylesheet" type="text/css" href="../css/11.小米商城导航栏.css">
</head>
<body>
	<div class="site-header">
		<div class="container clearfix">
			<div class="nav-logo">
				<a href="https://www.mi.com/index.html">
					<!--56*56-->
					<img src="../images/小米logo.png">
				</a>
			</div>
			<div class="nav-list">
				<ul>
					<li>
						<a href="#">小米手机</a>
					</li>
					<li>
						<a href="#">Redmi红米</a>
					</li>
					<li>
						<a href="#">电视</a>
					</li>
					<li>
						<a href="#">笔记本</a>
					</li>
					<li>
						<a href="#">家电</a>
					</li>
					<li>
						<a href="#">路由器</a>
					</li>
					<li>
						<a href="#">智能硬件</a>
					</li>
					<li>
						<!--在新的浏览器窗口打开新的链接-->
						<a href="https://www.mi.com/service/" target="_blank">服务</a>
					</li>
					<li>
						<!--在新的浏览器窗口打开新的链接-->
						<a href="http://www.xiaomi.cn/" target="_blank">社区</a>
					</li>
				</ul>
			</div>
			<div class="site-search">
				<form>
					<input type="text" name="" class="content border">
					<input type="submit" name="" value="🔍" class="search border">
					<div class="search_hot_word">
						<span>小米9</span>
						<span>小米9 SE</span>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

固定定位

脱离标准文档流，不在页面上占位置
层级提高，有压盖现象
一旦设置固定定位，在页面中滚动网页，固定不变
参考点：
- 以浏览器的左上角
应用：回到顶部，固定导航栏，小广告

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
			color: #fff;
		}
		#one{
			position: fixed;
			top: 50px;
			left: 20px;
		}
		.outer{
			width: 500px;
			height:200px;
			overflow: scroll;
			padding-left: 200px;
		}
	</style>
</head>
<body>
	<div class="outer">
		<p>
			月球的形成对于地球而言是一件大事，这是因为月球对地球生物的影响非常大，不仅引发了地球海洋的潮汐变化，还在夜晚为夜行性生物提供照明作用，以至于飞蛾在夜晚演化出了趋光性。在太阳系刚形成之初时，太阳系内的小行星，行星等发生碰撞是非常常见的事情，以至于至今在月球表面还留着大大小小的陨石撞击坑。
		</p>
		<p>
			之所以陨石撞击坑在地球上比较少见，是因为地球上的大气运动以及生物运动、板块运动等会擦除掉这些痕迹，比如：距今6500万年前撞击地球，导致恐龙灭绝的陨石坑，时至今日已经找不到它的踪迹。我们知道地球上曾经出现过五次生物大灭绝，其中绝大多数生物大灭绝都是由于地球环境的变化而引发，然而距今4.4亿年前奥陶纪生物大灭绝很可能是由伽马射线暴所引发。
		</p>
		<div class="box" id="one">One</div>
	</div>
</body>
</html>

小米商城固定侧方栏

.container{
	width: 1226px;
	height: 2000px;
	border: 1px solid orange;
	margin: 0 auto;
}
.site_bar{
	position: fixed;
	width: 27px;
	bottom: 100px;
	right: 17%;
}
.site_bar ul{
	list-style: none;/*清除li标签前面的点*/
	margin: 0;
	padding: 0;
}
.site_bar ul li{
	width: 25px;
	height: 39px;
	border: 1px solid #f5f5f5;
	background-color: #fff;
	border-top-color: #ffffff;/*防止a标签从上面溢出*/
}
.site_bar ul li.one{
	border-top-color: #f5f5f5;
}
.site_bar ul li a{
	display: block;
	width: 20px;
	height: 20px;
	margin: 9px 3px 10px 2px;
}
.site_bar ul li a img{
	width: 20px;
	height: 20px;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城固定侧方栏</title>
	<link rel="stylesheet" type="text/css" href="../css/12.小米商城固定侧方栏.css">
</head>
<body>
	<div class="container"></div>
	<div class="site_bar">
		<ul>
			<li class="one">
				<a href="#">
					<img src="../images/小米商城固定侧方栏1.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/小米商城固定侧方栏2.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/小米商城固定侧方栏3.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/小米商城固定侧方栏4.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../images/小米商城固定侧方栏5.png">
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

浮动和定位对行内元素的影响

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动和定位对行内元素的影响</title>
	<style type="text/css">
		/*span{
			float: left;
			background-color: red;
			width: 200px;
			height: 200px;
		}*/
		/*span{
			position: relative;
			background-color: red;
			width: 200px;
			height: 200px;*/
		/*span{
			position: absolute;
			background-color: red;
			width: 200px;
			height: 200px;*/
		/*span{
			position: fixed;
			background-color: red;
			width: 200px;
			height: 200px;*/
	</style>
</head>
<body>
	<span>我是行内</span>

</body>
</html>

设置浮动，绝对定位和固定定位都可以使行内元素设置宽高
设置相对定位不可以使行内元素设置宽高
**结论：**元素脱离标准文档流之后就可以设置宽高
**注意：**行内元素转为块级元素未脱离标准文档流

z-index属性

默认值为auto，可以修改为其他整数
谁的值大，谁就层级越高
注意：只能应用到定位的元素之上
从父现象：给父级标签设置的层级权重大于子级标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>z-index的讲解</title>
	<style type="text/css">
		.a{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			z-index: 3;
		}
		.b{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -30px;
			left: 50px;
			z-index: 2;
		}
		.c{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -50px;
			left: 100px;
			z-index: 1;
		}
	</style>
</head>
<body>
	<div style="position: relative; z-index: 10">
		<div class="a">A</div>
	</div>
	<div style="position: relative; z-index: 15">
		<div class="b">B</div>
	</div>
	<div class="c">C</div>
</body>
</html>