在Css上吃过的亏

news2025/2/23 23:37:43

一、前言

最近参加了公司的一个小程序的开发项目，虽然很简单，但是非常急三天就要交。本来就是实习生加上前端不熟练的我，最终在Css定位上吃了很大的亏。今天就来了解一下Css中的几个定位。

二、什么是定位

在Css中有一个position属性，代表定位，它有四个值，可以通过设置它的TLBR来调整元素位置
- absolute（绝对）（脱离文档流）
- relative（相对）（不脱离文档流）
- fixed（固定）（脱离文档流）
- sticky（粘性）（不脱离文档流）

三、文档流

想要清楚了解定位，就脱离不开文档流。
- 字面意思就是元素从上到下，从左到右，该在什么位置就在什么位置。
- 正常文档流是在我们没有刻意是控制它的时候，每个元素排放在文档都会按顺序排放
- 脱离文档流就是指它所显示的位置和文档代码就不一定一致了，刻意通过Css控制它来修改它的位置

四、不同定位的作用

1、absolute

首先第一点，它会脱离文档流，基本上可以理解为，它可以根据给予它的Css来调整自身的位置，而不会根据文档流的顺序来排放
即便它会脱离文档流，但absolute，定位依据是定位元素的父级，也就是如果它的父级有设置定位，那么它将根据它的父级元素来进行脱离文档流的位置调整
当它的所有父级元素都没有设置定位时，它将根据body进行定位

2、relative

不脱离文档流，在文档流本身排放自身元素的位置上，进行Css位置调整

3、fixed

脱离文档流，不再区分块元素、行内元素、行内块元素，固定定位不占有原来的位置
固定在浏览器页面上，不随浏览器的滚动而改变位置
以浏览器为参照物，和父元素没有任何关系

4、sticky

和fixed一样，以浏览器为参照物
元素不会脱离文档流，占有原来位置
粘滞定位可以在元素到达某个位置时，将其固定
没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

五、举例

1、代码

Html页面

<!DOCTYPE html>
<html style="background-color: beige;">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	</head>
	<body>
		<div style="background-color: black; width: 100px; height: 100px;" class="div1"></div>
		
		<div style="background-color: aqua; width: 100px;height: 100px;" class="div2"></div>
		
		<div style="background-color: red; width: 100px;height: 100px;" class="div3"></div>
	</body>
</html>

Css页面

.div1{
	position: relative;
	left: 20px;
	top: 20px;
	
}

.div2{
	position: absolute;
	top: 40px;
	left: 100px;
}

.div3{
	position: relative;
	
}

2、结果图

在这里插入图片描述

3、分析

黑色为div1，青蓝色为div2，红色为div3
这里可以看到青蓝色的div定位为absolute，是脱离文档流的，这里因为他的父级都没有，所以直接根据body进行定位
可以看出absolute和fixed的区别，他们同样脱离文档流，但以下是不同点
- absolute：根据它的父级元素的定位，但前提是它的父级元素有定位，如果所有父级元素都没有定位，那么将根据body进行定位
- fixed：以浏览器为参照物，和父元素没有任何关系
relative就是一个很乖的定位，原原本本的按照属于它的位置进行排放，这里可以看出，黑色板块即便设置了设置了偏移量，但下面红色的板块却照常摆放，就是因为两者都为relative，黑色板块只是设置了偏移量，它的本身还是在它原先的位置，因此红色板块才会那样显示

4、补充

为了更好的理解absolute定位，这里增加了一个div，方便理解

<!DOCTYPE html>
<html style="background-color: beige;">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	</head>
	<body>
		<div style="background-color: black; width: 100px; height: 100px;" class="div1"></div>
		
		<div style="background-color: black; width: 500px; height: 500px;" class="div4">
			<div style="background-color: aqua; width: 100px;height: 100px;" class="div2"></div>
		</div>
		
		<div style="background-color: red; width: 100px;height: 100px;" class="div3"></div>
	</body>
</html>

.div1{
	position: relative;
	left: 20px;
	top: 20px;
	
}
.div4{
	position: absolute;
	left: 500px; 
	top: 200px; 
}
.div2{
	position: absolute;
	top: 40px;
	left: 100px;
}
.div3{
	position: relative;
	
}