From 3e537149dd099df7f1d4034571134fe8a5be92ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=B5=A9=E5=86=89?= <3027237339@qq.com> Date: Mon, 21 Oct 2024 07:52:33 +0800 Subject: [PATCH] 1018 --- ...32\344\275\215\345\261\236\346\200\247.md" | 175 ++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 "\351\273\204\346\265\251\345\206\211/20241018\347\254\224\350\256\260-\345\256\232\344\275\215\345\261\236\346\200\247.md" diff --git "a/\351\273\204\346\265\251\345\206\211/20241018\347\254\224\350\256\260-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\351\273\204\346\265\251\345\206\211/20241018\347\254\224\350\256\260-\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000..5ede2ba --- /dev/null +++ "b/\351\273\204\346\265\251\345\206\211/20241018\347\254\224\350\256\260-\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,175 @@ +## 定位属性 + +CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 + +``` + position: absolute; + + position: relative; + + position: fixed; + +``` + +## 相对定位 + +**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + +在学习背景属性中有如下格式： + +``` + background-position:向右偏移量 向下偏移量; +``` + +但这回的定位属性，是通过如下格式： + +``` + position: relative; + left: 50px; + top: 50px; +``` + +相对定位的举例： + +```html + + + + + + + + + Document + + + + + + +
1
+
2
+ + + + +``` + +### 相对定位不脱标 + +**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 + + +### 相对定位的用途 + +如果想做“压盖”效果（把一个div放到另一个div之上），一般**不用**相对定位来做。相对定位，就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +PS：负数表示相反的方向。 + + +## 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 + +格式举例如下： + +``` + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 + +**绝对定位的盒子脱离了标准文档流。** + +所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 + +绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +### 绝对定位的参考点（重要） + +（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角 + +（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角： + +### 以盒子为参考点 + +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + + +（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷： + +``` +
相对定位 +
没有定位 +

绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 +
+
+ +``` + +``` +
相对定位 +
相对定位 +

绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 +
+
+``` + +（2）不一定是相对定位，任何定位，都可以作为儿子的参考点： + +子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 + +**工程应用：** + +“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做： + +> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。 + +（3）绝对定位的儿子，无视参考的那个盒子的padding。 + + +### 让绝对定位中的盒子在父亲里居中 + +我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 + +可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做： + +> left:50%; margin-left:负的宽度的一半 + +先将图片移动至中线处，再将图片的一半退回。 -- Gitee