From aae53bfa8a4366a1cb246bc818b6e290af82818d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=9C=E4=BB=95=E9=B9=8F?= <2293215729@qq.com>
Date: Sun, 20 Oct 2024 20:38:38 +0800
Subject: [PATCH] 20241018

---
 ...24\350\256\260\345\256\232\344\275\215.md" | 147 ++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 "\345\206\234\344\273\225\351\271\217/20241018-\345\256\232\344\275\215\347\254\224\350\256\260\345\256\232\344\275\215.md"

diff --git "a/\345\206\234\344\273\225\351\271\217/20241018-\345\256\232\344\275\215\347\254\224\350\256\260\345\256\232\344\275\215.md" "b/\345\206\234\344\273\225\351\271\217/20241018-\345\256\232\344\275\215\347\254\224\350\256\260\345\256\232\344\275\215.md"
new file mode 100644
index 0000000..a0838a0
--- /dev/null
+++ "b/\345\206\234\344\273\225\351\271\217/20241018-\345\256\232\344\275\215\347\254\224\350\256\260\345\256\232\344\275\215.md"
@@ -0,0 +1,147 @@
+## 定位
+CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
+
+```
+	position: absolute;  <!-- 绝对定位 -->
+
+	position: relative;  <!-- 相对定位 -->
+
+	position: fixed;     <!-- 固定定位 -->
+
+```
+## 相对定位
+
+**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
+
+我们之前学习的背景属性中，是通过如下格式：
+
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+但这回的定位属性，是通过如下格式：
+
+```
+	position: relative;
+	left: 50px;
+	top: 50px;
+```
+
+### 相对定位不脱标
+
+**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
+
+也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
+
+### 相对定位的用途
+
+如果想做“压盖”效果（把一个div放到另一个div之上），相对定位，就两个作用：
+
+- （1）微调元素
+- （2）做绝对定位的参考，子绝父相
+
+### 相对定位的定位值
+
+- left：盒子右移
+
+- right：盒子左移
+
+- top：盒子下移
+
+- bottom：盒子上移
+
+PS：负数表示相反的方向。
+
+## 绝对定位
+
+**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
+
+格式如下：
+
+```
+	position: absolute;  /*绝对定位*/
+	left: 10px;  /*横坐标*/
+	top/bottom: 20px;  /*纵坐标*/
+```
+### 绝对定位脱标
+
+**绝对定位的盒子脱离了标准文档流。**
+
+所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
+
+绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
+
+### 以盒子为参考点
+
+一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
+（1）
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    没有定位
+				<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
+			</div>
+		</div>
+
+```
+
+（2）
+
+```
+		<div class="box1">        相对定位
+			<div class="box2">    相对定位
+				<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
+			</div>
+		</div>
+```
+
+（3）不一定是相对定位，任何定位，都可以作为儿子的参考点：
+
+子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
+
+**工程应用：**
+
+“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
+
+> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
+
+绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
+
+### 让绝对定位中的盒子在父亲里居中
+
+我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
+
+可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
+
+```
+	div {
+		width: 600px;
+		height: 60px;
+		position: absolute;  绝对定位的盒子
+		left: 50%;           首先，让左边线居中
+		top: 0;
+		margin-left: -300px;  然后，向左移动宽度（600px）的一半
+	}
+```
+
+总结成一个公式：
+
+> left:50%; margin-left:负的宽度的一半
+
+## 固定定位
+
+**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+备注：IE6不兼容。
+
+**用途1**：网页右下角的“返回到顶部”
+
+比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
+
+**用途2：**顶部导航条
+
+固定在网页顶端的导航条，可以用固定定位来做。
+
+需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
+
+
-- 
Gitee