前端的学习-CSS（七）

银杏也要学习代码

已于 2024-07-30 19:55:28 修改

阅读量812

点赞数 31

文章标签：前端学习 css

于 2024-07-30 19:54:13 首次发布

本文链接：https://blog.csdn.net/m0_68823256/article/details/140803899

版权

一：定位(position)

1：为什么使用定位。

有一些固定的盒子，并且压在其他盒子上面，一些网页，会有固定的窗口，这些是标准流和浮动无法解决的，比如下面的例子。旁边的红色边框的效果是不会随着页面的下滑而动，而是固定在一个位置，此时用的就是定位。

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2：定位的组成

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式。

边偏移：决定了该元素的最终位置。

1：边偏移

边偏移：就是定位的盒子移动到最终位置。有top、bottom、left、right 4 个属性。

选择器{
    top: 32px;
    letf: 50px;
}

top：顶端偏移量，定义元素相对于其父元素上边线的距离。

bottom：底部偏移量，定义元素相对于其父元素下边线的距离。

left：左侧偏移量，定义元素相对于其父元素左边线的距离。

right：右侧偏移量，定义元素相对于其父元素右边线的距离。

2：定位模式

通过position属性定义元素的定位模式，语法如下：

选择器
    position: 属性值;
}

1：静态定位（static）

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器{
    position: static;
}

2：相对定位（relative）

相对定位是元素在移动位置的时候，是相对于它自己原来的位置

语法：

选择器{
    position: relative;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1,
			.box3 {
				width: 120px;
				height: 120px;
				background-color: pink;
			}

			.box2 {
				width: 120px;
				height: 120px;
				background-color: deeppink;
				/* 相对定位 */
				position: relative;
				left: 120px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

相对定位的特点：

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

3：绝对定位（absolute）

绝对定位是元素在移动位置的时候，是相对于静态static定位以外的第一个祖先元素进行定位。

语法：

选择器{
    position: absolute;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				font-size: 20px;
			}

			.box1,
			.box3 {
				width: 120px;
				height: 120px;
				background-color: pink;
			}

			.box2 {
				width: 120px;
				height: 120px;
				background-color: deeppink;
				/* 相对定位 */
				position: absolute;
				left: 120px;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

如果父元素设置了position：relative;的话，则是以父元素的左上角为0，0点。如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				font-size: 20px;
			}

			.box-main {
				width: 400px;
				height: 400px;
				background-color: aqua;
				position: relative;
				margin-left: 150px;
				margin-top: 150px;
			}

			.box1,
			.box3 {
				width: 120px;
				height: 120px;
				background-color: pink;
			}

			.box2 {
				width: 120px;
				height: 120px;
				background-color: deeppink;
				/* 相对定位 */
				position: absolute;
				top: 0px;
				left: 120px;
			}
		</style>
	</head>
	<body>

		<div class="box-main">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
		</div>

	</body>
</html>

将父元素的相对定位注释，则会是一下效果。

特点：

1、完全脱标 —— 完全不占位置。

2、如果父元素没有非static定位，则以浏览器为准定位。

3、如果父元素有定位：元素将依据最近的已经定位（绝对absolute、固定fixed或相对定位 relative,不能是static）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

子级是绝对定位的话，父级要用相对定位。父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

1：子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2：父盒子需要加定位限制子盒子在父盒子内显示。

3：父盒子布局时，需要占有位置，因此父亲只能是相对定位。

如上的两边的箭头，是基于装图片的盒子进行的定位，装图片的盒子为两边箭头的父级，使用了相对定位，箭头使用绝对定位，使得箭头位于盒子的两边。

同样二级菜单也是，使用了子绝父相的定位。

4：固定定位(fixed)

固定定位是元素固定于浏览器可视区的位置，主要使用场景，可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器{
    position: fixed;
}

1.以浏览器的可视窗口为参照移动元素。跟父元素没有关系，不随滚动条滚动。

2.固定定位不再占有原先的位置（完全脱标）。

5：粘性定位(sticky)

粘性定位可以被认为是相对定位和固定定位的混合。 sticky粘性的。

语法：

选择器{
    position: sticky;
}

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

比如说爱淘宝上方的搜索栏。

6：堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

语法：

选择器{
    z-index: 1000;
}

z-index 的特性如下：

1、属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

2、如果属性值相同，则按照书写顺序，后来居上；

3、数字后面不能加单位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				font-size: 20px;
			}

			.box-main {
				width: 400px;
				height: 400px;
				background-color: aqua;
				position: relative;
				margin-left: 150px;
				margin-top: 150px;
			}

			.box1 {
				width: 120px;
				height: 120px;
				background-color: hotpink;
				position: absolute;
				top: 20px;
				left: 20px;
			}

			.box3 {
				width: 120px;
				height: 120px;
				background-color: pink;
				position: absolute;
				top: 60px;
				left: 60px;
			}

			.box2 {
				width: 120px;
				height: 120px;
				background-color: deeppink;
				position: absolute;
				top: 40px;
				left: 40px;
			}
		</style>
	</head>
	<body>

		<div class="box-main">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
		</div>

	</body>
</html>

上图为默认情况下，按顺序排列。

此时给2号盒子加上z-index: 100;

.box2 {
	width: 120px;
	height: 120px;
	background-color: deeppink;
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 100;
}

2号盒子会跑到最上面来

银杏也要学习代码

关注

31
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端的学习-CSS（七）

前端的学习-定位
复制链接

扫一扫