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