Web前端105天-day07-CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_52810836/article/details/127807605

本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位和固定定位。相对定位允许元素在其原始位置基础上进行位移；绝对定位使元素脱离正常文档流，根据最近的已定位祖先元素进行定位；固定定位则将元素固定在屏幕的某个位置，不受滚动影响。此外，还展示了如何使用`z-index`控制元素的堆叠顺序。文章通过实例代码加深了读者的理解，并提供了练习题以巩固学习效果。

摘要由CSDN通过智能技术生成

day07

前言

第七天学习开始

一、复习

背景色， rgba() a0-1

背景图插入，必须有宽度高度

背景图重复

背景图定位，精灵图

背景图尺寸

圆角

去掉列表标识符

去掉轮廓线

盒子阴影

光标样式

布局方式

浮动

二、定位

1.定位属性

position 定位属性，有五种状态，静态定位（默认），相对定位，绝对定位，固定定位，粘性定位

用的最多，兼容较好。相对定位，绝对定位，固定定位。

具有定位属性的元素，如果想改变它位置，需要使用修改元素的位置属性。以下四个属性只有在给元素创建了定位属性后才能使用。简单说元素没有写position 属性就不能用以下四个位移属性。

top 上

bottom 下

left 左

right 右

当元素具有定位属性 position 后，就可以改变其原有层级，属性是 z - index

取值默认为 auto ，在 0 和 1 之间

可以为负值

一般使用正负整数，无需任何单位

数值越大层级越高，写值的时候建议以十位或百位为跨度

2.相对定位

position: relative; 相对定位属性

相对定位使用四个方向的位移，参照的是自己在没有定位之前的位置

使用相对定位还在文档流中

当定位的位置离原本的位置过于远，就不好计算位移的位置，小距离的位移可以

3.绝对定位

position: absolute; 代表绝对定位
绝对定位的元素脱离文档流，会使父级失高

相对定位元素只要一使用位移属性，它就触发寻找相对定位的参照点，会顺着标签结构向上寻找，直到碰到position属性才会停下

因此如果子元素绝对定位，父元素一定需要加一个定位属性来控制子元素的位移，父元素尽量使用相对定位
当元素处于绝对定位，它也会块状化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.baba {
			background-color: red;
			position: relative;
			margin: 100px;
		}
		.d1 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			/* position: absolute; */
		}
		.d2 {
			width: 150px;
			height: 120px;
			background-color: green;
			position: absolute;
			top:20px;
			left:30px;
		}
		p {
			width: 300px;
			height: 40px;
			line-height: 40px;
			background-color: yellow;
		}
		p {
			position: relative;
		}
		</style>
	</head>
	<body>
		<div class="baba">
			<div class="d1"></div>
			<div class="d2"></div>
		</div>
	</body>
</html>

3.固定定位

position:fixed 固定定位，它是唯一一个可以限定固定在html根元素上的，它一定是脱离文档流，可以使用left，top，bottom，right来控制方向，同时可以使用 z-index 调整层级顺序。
常用场景：
返回顶部
侧边的功能提示条
固定导航和固定菜单
广告
大图展示
悬浮窗口
登录等提示框
全屏遮罩层

/* 全屏的固定定位的遮罩层 */
.mark {
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

固定定位示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.baba {
				width: 600px;
				height: 600px;
				background-color: red;
				position: relative;
			}
			.d1 {
				width: 150px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			.fixed {
				width: 100px;
				height: 100px;
				background-color: blue;
				position: fixed;
				bottom: 30px;
				right: 40px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="baba">
			<div class="d1">
				<div class="fixed">爱写哪写哪</div>
			</div>
		</div>
	</body>
</html>

练习：实现如下导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.nav {
				height: 40px;
				background-color: #f4f3ea;
			}

			.center {
				width: 1000px;
				margin: auto;
			}

			/* class 类名的命名不许数字开头，多个单词可以使用
			 nav-item 只限css使用
			 nav_item css，js都可以用
			 navItem  css，js都可以用
			 */
			.nav .nav-item {
				width: 90px;
				float: left;
				text-align: center;
				position: relative;
			}

			.nav .nav-item a {
				color: #000;
				line-height: 40px;
				text-decoration: none;
				font-size: 14px;
				display: block;
			}
		/* 把a变成块元素，把渐变给到a */
			.nav .nav-item:hover a{
				background-image: linear-gradient(#D41011, #940000);
				color: #fff;
			}

			/* 鼠标移入到谁？？？？？ */
			.nav-item:hover ul {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="center">
				<!-- 包裹一个a标签和a标签下面的下拉菜单 -->
				<div class="nav-item">
					<a href="javascript:;">首页</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">关于汉唐</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">新闻中心</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">公司业务</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">企业文化</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">合作交流</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">招贤纳士</a>
				</div>
				<div class="nav-item">
					<a href="javascript:;">联系我们</a>
				</div>
			</div>
		</div>
	</body>
</html>

总结

第七天学习结束