css定位学习笔记 | 青训营

在CSS中，定位是其中一个非常重要的概念。通过定位，我们可以精确地控制元素在网页中的位置和布局。本文将记录我在学习CSS定位知识过程中的一些学习笔记。

在CSS中，有三种常见的定位方式：静态定位（static）、相对定位（relative）和绝对定位（absolute）。每种定位方式都有其独特的特点和用途。

首先是静态定位（static）。静态定位是元素的默认定位方式，也就是说，如果没有明确指定定位方式，元素将使用静态定位。在静态定位下，元素的位置由文档流决定，无法通过top、bottom、left、right等属性来调整位置。这种定位方式适用于大多数情况，特别是对于普通的文本和图片元素。

接下来是相对定位（relative）。相对定位是相对于元素在文档流中的原始位置进行定位。通过使用top、bottom、left、right等属性，我们可以相对于原始位置调整元素的位置。相对定位不会影响其他元素的位置，所以它可以用来微调元素的位置或创建一些简单的动画效果。

<style>
    .box1 {
        position: relative;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
    }
    .box2 {
        width: 200px;
        height: 200px;
    }
</style>

最后是绝对定位（absolute）。绝对定位是相对于最近的已定位祖先元素或文档的窗口进行定位。如果没有已定位的祖先元素，那么元素将以文档窗口为基准进行定位。通过使用top、bottom、left、right等属性，我们可以精确地控制元素在网页中的位置。绝对定位可以用来创建复杂的布局和覆盖其他元素的效果。

<style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

除了这三种常见的定位方式外，CSS还提供了固定定位（fixed）和粘性定位（sticky）两种特殊的定位方式。固定定位是相对于浏览器窗口进行定位，无论用户如何滚动页面，元素都会保持在固定的位置。粘性定位则是一种介于相对定位和固定定位之间的特殊定位方式，元素在滚动到指定位置时会变为固定定位，否则则保持相对定位。

<style>
    body {
        height: 3000px;
    }
    .nav {
        /* 粘性定位 */
        position: sticky;
        top: 0;
        width: 800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto;
    }
    .dj {
        /* 固定定位 */
        position: fixed;
        top: 100px;
        left: 40px;
    }
</style>

除了定位方式，还有一些与定位相关的属性也值得我们学习和掌握。例如，z-index属性可以用来控制元素的层叠顺序，opacity属性可以用来控制元素的透明度，transform属性可以用来实现元素的旋转、缩放和平移等效果。