CSS学习笔记：定位属性位置。
1.定位属性介绍2。每个属性值的具体功能1。相对2。绝对3。修正了三三个定位属性的效果总结。
参考：https://www.bilibili.com/video/BV18J411S7tZp=4
一、定位属性简介
属性位置用于指定元素的定位方法类型，其值为静态(默认类型)、相对、绝对和固定。当position属性的值不是静态的(即不为默认)时，我们可以添加：top、bottom、left和right属性来详细定位当前元素，我们可以使用z-index来设置层次关系。
二、各属性值的具体功能
1. relative
首先，构建一个测试框架：
分区/部门
分区/部门
分区/部门
对应的css:
div {
宽度： 200 px；
高度： 200 px；
}
#box1 {
背景技术# df637a
}
#box2 {
背景技术# 6ad281
}
#box3 {
背景： # 72d 0 F6；
}
目前的效果是：
此时，我们将#box2(绿色div)的位置值更改为相对，并为其设置顶部和左侧属性：
#box2 {
.
相对位置：
top: 200px
left: 200px
}
此时的效果是：
可以发现，当定位属性值为相对时，元素偏移量的参考点就是元素本身。此外，虽然元素已经移动到一个新的位置，元素是仍然会占有原有的位置,这就是为什么蓝色div没有安排在它上面。
2. absolute
我们的测试框架还是和上面一样，初步效果如下：
此时，打开#box2的绝对定位(绝对位置：):
#box2 {
背景技术# 6ad281
/*使用绝对定位*/
绝对位置：
}
效果如下：
您可以看到蓝色div缺失，因此请检查元素：
可以发现原来的蓝色方块还在，只是放在绿色方块下面。这是因为当对一个元素启用绝对定位时，该元素类似于浮动的不会占用原有的空间了,因此它后面的蓝色方块将被排列在红色方块的下方。
这时，我们设置相应的偏移量：
#box2 {
.
/*移动元素位置*/
top: 200px
left: 200px
}
效果如下：
可以发现此时绿色方块的偏移参照点为浏览器的（0,0）点也可以理解为身体元素的左上角。
但是，在绝对定位中，参考点并不总是浏览器的(0，0)点。首先，编写以下场景：
分区/部门
差异
差异
分区/部门
/div
/div
分区/部门
添加css:
#box2 {
宽度： 300 px；
height: 300px
背景技术# 6ad281
}
#父亲#
宽度： 200 px；
高度： 200 px；
背景-color:梅花；
}
#儿子#
宽度： 100 px；
高度： 100像素；
背景-颜色：粉色；
}
当前效果：
此时，为儿子添加绝对定位并设置一定的偏移量：
#儿子#
宽度： 100 px；
高度： 100像素；
背景-颜色：粉色；
绝对位置：
top: 100px
left: 100px
}
显然，它当前的参考点仍然是浏览器页面的(0，0)点。
此时，为#父元素添加一个定位(静态定位除外):
#父亲#
.
相对位置：
}
此时，可以发现#son元素的参考点变成了#父元素。
因此，当使用绝对定位时，元素的参考点是：元素从外层寻找最近的有添加定位的父级元素；
如果找到，参考点是父元素的左上角。
否则，参考点被设置为主体元素的左上角(即浏览器页面的(0，0)点)。
3. fixed
当设置为固定时，元素将固定在窗口中的某个位置，即相对于整个窗口的位置不会改变。
具体例子：
差异
Div边栏/div。
/div
#大#
高度： 2000 px；
背景-颜色：粉色；
}
#左栏{
height: 300px
宽度： 100 px；
背景-color:梅花；
位置：固定；
top: 200px
right : 0；
}
测试效果：
此时，无论你如何拖动页面，这个侧边栏仍然会保留在窗口的左侧，所以你可以使用这个定位来制作一个悬停效果。
三、三种定位属性的效果总结
定位属性值
影响
亲戚
元素的偏移参考点就是元素本身。虽然元素已经移动，但元素是仍然会占有原有的物理位置.
绝对的
元素不占用原始物理空间，偏移参考点是添加了定位的最近的父元素。
固定的；不变的
元素将固定在窗口的一个位置，即相对于整个窗口的位置不会改变。
提示：只有在带有定位的元素中添加了上、下、左、右、z-index等定位属性时，才会生效。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/67471.html
