CSS 定位_css定位通常与哪几个样式一起使用?-CSDN博客

本文链接：https://blog.csdn.net/weixin_43885123/article/details/84673266

CSS 定位

相对定位
绝对定位
固定定位
通常，我们需要将绝对定位与将对定位结合使用，父元素采用相对定位，里面的子元素采用绝对定位。

定位分为三种：
1.相对定位—relative
2.绝对定位—absolute
3.固定定位—fixed

相对定位

相对定位，相对于自己原来位置进行定位，原来位置保留

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 300px;
            height: 100px;
            background-color: black;
        }
        .div2{
            width: 180px;
            height: 180px;
            background-color: orange;
        }

    </style>
</head>
<body>
        <div class="div1"></div>
        <div class="div2"></div>
</body>
</html>

此时两个div的位置如图所示：
效果图

然后我们将黑色的div进行相对定位
使他距顶部100px
距左边200px
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 300px;
            height: 100px;
            background-color: black;
            /*进行相对定位*/
            position: relative;
            top: 100px;
            left: 200px;
        }
        .div2{
            width: 180px;
            height: 180px;
            background-color: orange;
        }

    </style>
</head>
<body>
        <div class="div1"></div>
        <div class="div2"></div>
</body>
</html>

效果如图：
效果图
我们看到，橙色div的位置没变，表明黑色div之前的位置仍然保留了。

绝对定位

绝对定位，相对于第一个采取定位的父元素来定位，原来的位置不会保留

这时候我们将相对定位换成绝对定位；
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 300px;
            height: 100px;
            background-color: black;
            /*进行绝对定位*/
            position: absolute;
            top: 100px;
            left: 200px;
        }
        .div2{
            width: 180px;
            height: 180px;
            background-color: orange;
        }

    </style>
</head>
<body>
        <div class="div1"></div>
        <div class="div2"></div>
</body>
</html>

效果如图：
效果图
这时候，黑色div原来位置没有保留；橙色div的位置去了上面

固定定位

固定位置，使元素固定在屏幕的某个位置
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width: 300px;
            height: 200px;
            background-color: black;
            /*进行绝对定位*/
            position: fixed;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
        <div class="div1"></div>
</body>
</html>

此时，无论我们怎么滑动滚动条，
这个div的位置都不会发生变化，
永远距离顶部100px
距离左边200px