【从零开始的Java开发】2-8-4 CSS定位：相对定位、绝对定位、固定定位、与浮动

karshey

于 2022-08-19 15:35:49 发布

阅读量270

点赞数

分类专栏：从零开始的Java开发文章标签： css css3 html

本文链接：https://blog.csdn.net/karshey/article/details/126423386

版权

从零开始的Java开发专栏收录该内容

31 篇文章 4 订阅

订阅专栏

本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位、固定定位和浮动的概念与应用。通过实例展示了如何使用`position`属性调整元素的位置，以及`z-index`用于控制层叠顺序。此外，还探讨了相对定位与浮动的组合使用情况，以及在实际布局中如何解决元素覆盖问题。

摘要由CSDN通过智能技术生成

目录层次是乱标的，感觉除了”定位“外其他都应该子目录…

文章目录

定位

关键字position的四个属性：

relative：相对
absolute：绝对
static：无定位（默认）
fixed：固定

相对定位

相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。

代码演示：
html文件：

<body>
    <div class="main">
        <div class="div1"></div>
        一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话
    </div>
</body>

css文件：

.main {
    height: 600px;
    width: 600px;
    background-color: lightpink;
}

.div1 {
    width: 100px;
    height: 100px;
    background-color: deeppink;
}

显示：
在这里插入图片描述
加了相对位置后：
css的div1为：

.div1 {
    width: 100px;
    height: 100px;
    background-color: deeppink;
    position: relative;
    top: 20px;
    left: 20px;
}

显示：相对于之前的自己（没有加position）的偏移。
在这里插入图片描述

绝对定位

相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。

把div1改成：

.div1 {
    width: 100px;
    height: 100px;
    background-color: deeppink;
    position: absolute;
}

则显示：深粉色可以看作是浮动了。
在这里插入图片描述

相对定位与绝对定位

注意：有top和left时，必须要设置position

一些关于相对定位和绝对定位的演示：
html：

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

css：

div {
    height: 100px;
    width: 100px;
}

.div1 {
    background-color: lightpink;
}

.div2 {
    background-color: skyblue;
}

.div3 {
    background-color: springgreen;
}

显示：
在这里插入图片描述
需求：把它们三个同时移到页面中间，且它们三个的相对位置不变。

css的div改成：

div {
    height: 100px;
    width: 100px;
    position: relative;
    top: 150px;
    left: 550px;
}

显示：这里要用relative才行，absolute会浮动的。
在这里插入图片描述

绝对定位与浮动

已知绝对定位和float都可以产生浮动。若我们想要产生浮动，我们用绝对定位产生，还是用float产生？

html：

<body>
    <div class="div0">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话一段废话
</body>

若用绝对定位的css：

div {
    height: 100px;
    width: 100px;
}

.div0 {
    position: absolute;
    left: 100px;
}

.div1 {
    background-color: lightpink;
}

.div2 {
    background-color: skyblue;
}

.div3 {
    background-color: springgreen;
}

显示：方块浮动了，但会遮挡住下面的字。
在这里插入图片描述
若用float浮动，将css的div0改成：

.div0 {
    float: left;
}

显示：没有挡住。
在这里插入图片描述

相对定位与浮动

相对定位与浮动一起产生时，不会有覆盖。
css的div0如下：

.div0 {
    height: 300px;
    position: relative;
    right: 10px;
    float: right;
}

显示：
在这里插入图片描述

z-index

想让三个颜色块层叠，并测试哪个在上。

html：

<body>
    <div class="div0">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>

css：

div {
    height: 100px;
    width: 100px;
}

.div0 {
    height: 300px;
}

.div1 {
    background-color: lightpink;
    position: absolute;
    top: 20px;
    left: 100px;
}

.div2 {
    background-color: skyblue;
    position: absolute;
    top: 40px;
    left: 120px;
}

.div3 {
    background-color: springgreen;
    position: absolute;
    top: 60px;
    left: 140px;
}

显示：
在这里插入图片描述
z-index用来显示谁在前面：参数是数字——数字越大的就在越前面。数字上不封顶，但太大了也没意义。

改变div1-3：

.div1 {
    background-color: lightpink;
    position: absolute;
    top: 20px;
    left: 100px;
    z-index: 3;
}

.div2 {
    background-color: skyblue;
    position: absolute;
    top: 40px;
    left: 120px;
    z-index: 0;
}

.div3 {
    background-color: springgreen;
    position: absolute;
    top: 60px;
    left: 140px;
    z-index: 2;
}

显示：显然粉色在上，其次绿、蓝。
在这里插入图片描述

固定定位

相对于浏览器窗口进行定位。
是fixed。

需求，将废话左和废话右固定在浏览器两边。

css：

.div1 {
    width: 5%;
    height: 100px;
    position: fixed;
    top: 200px;
    left: 2%;
    background-color: lightpink;
}

.div2 {
    width: 80%;
    position: relative;
    left: 10%;
}

.div3 {
    width: 5%;
    height: 100px;
    position: fixed;
    top: 200px;
    right: 2%;
    background-color: skyblue;
}