CSS学习笔记:定位属性position

目录

参考资料:https://www.bilibili.com/video/BV18J411S7tZ?p=4

一、定位属性简介

position属性是用于指定一个元素的定位方法类型的属性,它的取值有:static(默认类型)、relative、absolute、fixed。当position属性的值不为static(即不为默认)时,我们可以添加:topbottomleftright属性对当前元素进行具体的定位,并且可以使用z-index来设置层级的上下关系。

二、各属性值的具体功能

1. relative

首先先搭建出测试框架:

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

对应的css:

div {
    width: 200px;
    height: 200px;
}
#box1 {
    background: #df637a;
}
#box2 {
    background: #6ad281;
}
#box3 {
    background: #72d0f6;
}

当前的效果为:

CSS学习笔记:定位属性position

此时我们将#box2(绿色div)的position值改为relative,并为其设置topleft属性:

#box2 {
    ...
    position: relative;
    top: 200px;
    left: 200px;
}

此时的效果为:

CSS学习笔记:定位属性position

可以发现,当定位属性值为relative时,元素发生偏移的参考点为该元素自身。此外虽然元素移动到了新的位置,但是元素仍然会占有原有的位置,这也是为什么蓝色div没有排到上面。

2. absolute

我们的测试框架仍与上面相同,初始的效果如下:

CSS学习笔记:定位属性position

此时为#box2开启绝对定位(position: absolute):

#box2 {
    background: #6ad281;
    /*使用绝对定位*/
    position: absolute;
}

效果如下:

CSS学习笔记:定位属性position

可以发现蓝色div不见了,此时检查元素:

CSS学习笔记:定位属性position

可以发现原来蓝色方块还在,只是放置到了绿色方块的下面。这是因为当元素启用绝对定位是,该元素就和浮动类似,不会占用原有的空间了,因此后面蓝色的方块就会排列在了红色方块的下面。

此时我们再设置对应的偏移:

#box2 {
    ...
    /*移动元素位置*/
    top: 200px;
    left: 200px;
}

效果如下:

CSS学习笔记:定位属性position

可以发现此时绿色方块偏移的参照点为浏览器的(0,0)点,也可以理解为body元素的最左上角。

但absolute定位并不是什么情况下参照点都为浏览器的(0,0)点的,先编写以下场景:

<div id="box1"></div>
<div id="box2">
    <div id="father">
        <div id="son"></div>
    </div>
</div>
<div id="box3"></div>

添加css:

#box2 {
    width: 300px;
    height: 300px;
    background: #6ad281;
}
#father {
    width: 200px;
    height: 200px;
    background-color: plum;
}
#son {
    width: 100px;
    height: 100px;
    background-color: pink;
}

当前效果:

CSS学习笔记:定位属性position

此时为son添加absolute定位,并且设置一定的偏移量:

#son {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    top: 100px;
    left: 100px;
}
CSS学习笔记:定位属性position

显然,它当前的参照点还是浏览器页面的(0,0)点。

此时为#father元素也添加一个定位(除了static的定位都可以):

#father {
    ...
    position: relative;
}
CSS学习笔记:定位属性position

此时可以发现#son元素的参考点变成#father元素了。

因此,当使用absolute定位时,元素的参考点为:该元素向外层寻找最近的有添加定位的父级元素

  1. 找到了则参考点为该父级元素的左上角
  2. 否则参考点设置为body元素的左上角(即浏览器页面的(0,0)点)。

3. fixed

当设置了fixed后元素将固定在窗口的一个位置,即相对整个窗口的位置不再发生变化。

具体例子:

<div id="big">
    <div id="left-bar">侧边条</div>
</div>
#big {
    height: 2000px;
    background-color: pink;
}
#left-bar {
    height: 300px;
    width: 100px;
    background-color: plum;

    position: fixed;
    top: 200px;
    right: 0;
}

测试效果:

CSS学习笔记:定位属性position

此时无论如何拖动页面,这个侧边条依然会保持在窗口的左边不动,因此使用这个定位可以制作悬停效果。

三、三种定位属性的效果总结

定位属性值 效果
relative 元素发生偏移的参考点为该元素自身,虽然元素发生了移动,但是元素仍然会占有原有的物理位置
absolute 元素不会占用原有的物理空间,且偏移参考点为最近的有添加定位的父级元素,如果找不到则为body元素(即浏览器(0,0)点)
fixed 元素将固定在窗口的一个位置,即相对整个窗口的位置不再发生变化

tips:只有添加了定位的元素中添加top、bottom、left、right和z-index这些定位属性才会生效。

上一篇:java基础:NIO之Buffer(2)


下一篇:ShardingJDBC实现分库以及读写分离架构搭建