CSS 常用样式——定位属性类型及特点

一、相对定位

相对定位是 CSS 中的一种定位方式，它允许我们将一个元素相对于其原始位置进行定位，而不会影响其它元素的位置和尺寸。相对定位是通过 position: relative; 属性实现的。

相对定位常用于创建位置相对于父元素的元素，以及重叠元素。我们可以使用 top, bottom, left, right 属性调整元素的位置。

以下是相对定位的代码演示：

<style>
    .container {
        width: 400px;
        height: 300px;
        background-color: #eee;
        position: relative;
    }

    .box {
        width: 50px;
        height: 50px;
        background-color: #f00;
        position: relative;
        left: 50px;
        top: 50px;
    }
</style>

<div class="container">
    <div class="box"></div>
</div>

在上面的代码中，我们创建了一个容器元素 .container 和一个相对定位的元素 .box。我们使用 left 和 top 属性将 .box 元素相对于其原始位置向右和向下移动了 50 像素。

相对定位还有一个很重要的特性：它不会改变页面布局结构。即使我们将 .box 元素进行了相对定位，.container 元素的高度和宽度不会受到影响。这使得相对定位非常适合用于创建重叠元素。

下面是一个相对定位创建重叠元素的例子：

<style>
    .container {
        width: 200px;
        height: 200px;
        background-color: #eee;
        position: relative;
    }

    .box {
        width: 150px;
        height: 150px;
        background-color: #f00;
        position: relative;
        top: -50px;
        left: 50px;
        z-index: 1; /* 设置 z-index 属性来控制元素前后顺序 */
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: #00f;
        position: relative;
        z-index: 2;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box2"></div>
</div>

在上面的代码中，我们创建了一个容器元素 .container 和两个相对定位的元素 .box 和 .box2。我们使用 top, left 和 z-index 属性来控制元素的位置和前后顺序，从而实现了两个元素的重叠。

总结来说，相对定位是一种非常有用的定位方式，在布局中有广泛的应用。我们可以使用相对定位来创建位置相对于父元素的元素，重叠元素，以及在动画过程中元素的移动等效果。

二、绝对定位

CSS绝对定位是一种基于元素所在父元素位置的绝对位置的定位方式。当元素被绝对定位后，元素的位置将被设置为相对于其最近的父级元素的位置，而不是相对于文档流中的位置。

要使用CSS绝对定位，需要两个必要的CSS属性：position和top, bottom, left, right其中之一。

• position属性是用来设置元素的定位方式，可以是static、relative、absolute、fixed或sticky。
• top, bottom, left, right属性则是用来设置元素从其父级元素边缘的距离。

以下是CSS绝对定位的使用示例：

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在上述示例中，我们首先将父元素的position属性设置为relative，这是必要的，因为只有设置为relative或absolute的元素才可以作为绝对定位的父级元素。

接着，我们将子元素的position属性设置为absolute，并将其top和left属性设置为50像素，这意味着子元素将位于其父元素的左上角偏移50像素的位置。子元素还具有宽度和高度以及背景颜色，以便我们可以查看其位置和大小。

最终我们将得到以下结果：

这里是一些其他的关于CSS绝对定位的示例：

示例1：绝对定位在文档流之外

.parent {
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.child {
  position: absolute;
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在这个示例中，我们将子元素的top设置为-50像素，这意味着它将位于父元素的顶部之上。在这种情况下，它将覆盖位于父元素之外的部分。结果如下：

示例2：绝对定位在文档流之内

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 20px;
  margin-right: 20px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在这个示例中，我们将子元素的bottom和right属性设置为0，这意味着它将位于其父元素的右下角。我们还设置了margin-bottom和margin-right属性，以便我们可以将子元素留出一些空间，以便我们可以看到其父元素的背景颜色。结果如下：

三、固定定位

CSS的固定定位（position:fixed）是一种非常强大的定位方式，它可以让元素相对于浏览器窗口固定不动，不随页面滚动而移动。下面来详细解析一下CSS固定定位的用法。

首先，我们来看一下CSS固定定位的基本语法：

position: fixed;
top: 像素值;
left: 像素值;
right: 像素值;
bottom: 像素值;

其中，position属性的值必须为fixed，其他几个属性则控制元素相对于浏览器窗口上下左右的位置。

下面我们来看一些具体的用法和代码演示。

固定导航栏

我们可以用CSS固定定位来实现一个固定在页面顶部的导航栏，无论用户向下滚动页面，导航栏始终保持在页面顶部，方便用户随时使用。

<div class="navbar">这是一个固定在页面顶部的导航栏</div>
<div class="content">这是页面的内容</div>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.content {
  height: 2000px;
  padding-top: 50px;
}

上面的代码中，我们给导航栏设置了固定定位，使它固定在页面顶部，同时可以通过top、left、right属性控制导航栏相对于浏览器窗口的位置。我们还设置了一个padding-top属性给.content元素，以防止页面内容被导航栏遮挡。

固定广告悬浮框

我们可以用CSS固定定位来实现一个固定在页面某个角落的广告悬浮框，不随页面滚动而移动，提高广告的曝光率。

<div class="ad">这是一个固定在页面右下角的广告悬浮框</div>
<div class="content">这是页面的内容</div>

.ad {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 200px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 200px;
}
.content {
  height: 2000px;
}

上面的代码中，我们给广告悬浮框设置了固定定位，使它固定在页面右下角，同时可以通过bottom、right属性控制广告悬浮框相对于浏览器窗口的位置。我们还设置了一个width和height属性给广告悬浮框，以及一些样式属性使悬浮框看起来更具吸引力。

需要注意的是，在使用固定定位时，元素的布局会改变，可能会影响其他元素的布局，所以需要根据实际情况进行调整。

四、定位应用

CSS 定位是一种将 HTML 元素摆放在页面中特定位置的方式。常用的定位属性有：relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。下面我们将给出一些具体例子和代码演示，来更好地说明这些属性的使用方法。

1. 相对定位

相对定位是指元素的位置是相对于它在文档流中的原本位置。在相对定位中，元素仍然占据文档流中原来的空间，因此其他元素的位置不会受到影响。

代码演示：

<style>
  .box {
    position: relative;
    left: 50px;
    top: 50px;
  }
</style>

<div class="box">
  <p>这是一个相对定位的盒子</p>
</div>

解释：

在这个例子中，我们使用了相对定位（position: relative）来将盒子（class="box"）向右和向下移动 50 像素。具体来说，我们使用 left 和 top 属性来设置元素相对于原来位置的偏移量。

1. 绝对定位

绝对定位是指元素的位置是相对于其最近的定位祖先元素（父元素或祖先元素中第一个设置了定位的元素）。如果没有定位的祖先元素，那么元素的位置是相对于文档的 body 元素。

代码演示：

<style>
  .box1 {
    position: relative;
  }
  
  .box2 {
    position: absolute;
    left: 50px;
    top: 50px;
  }
</style>

<div class="box1">
  <p>这是一个相对定位的盒子</p>
  <div class="box2">
    <p>这是一个绝对定位的盒子</p>
  </div>
</div>

解释：

在这个例子中，我们使用了相对定位（class="box1"）来让父元素成为了绝对定位元素的参考点。然后，在子元素（class="box2"）中使用了绝对定位（position: absolute），并设置了 left 和 top 属性来调整子元素的位置。这里的位置是相对于父元素的，因为父元素是最近的定位祖先元素。

1. 固定定位

固定定位是指元素的位置是相对于视口（浏览器窗口）而不是相对于文档流。因此，无论页面如何滚动，元素的位置始终不变。

代码演示：

<style>
  .box {
    position: fixed;
    right: 0;
    bottom: 0;
  }
</style>

<div class="box">
  <p>这是一个固定定位的盒子</p>
</div>

解释：

在这个例子中，我们使用了固定定位（position: fixed）来将元素（class="box"）定位在视口的右下角。具体来说，我们使用 right 和 bottom 属性来设置元素与视口边缘的距离。

以上是 CSS 定位的三种基本用法，相信通过以上的代码演示，您已经了解了这些属性的使用方法。

五、压盖顺序

CSS中的定位属性包括四个：relative、absolute、fixed和static。当多个元素叠加在一起时，它们的显示顺序由它们的定位属性和z-index值决定。

1. static定位属性

默认值是 static。此时 z-index属性对其不起作用，也不能设置 top、left、right、bottom，相对于文档流定位。

1. relative定位属性

设置元素相对于它的正常位置进行定位, 其他元素仍保持原来的位置不受影响。如果不设置 z-index，那么该元素会在其他没有设置定位属性的元素之上。

1. absolute定位属性

设置元素相对于最近的非 static 定位祖先元素进行定位，如果祖先元素中没有非 static 定位的元素，则相对于body元素。设置 z-index 可以调整它在其他元素之上的显示顺序。

1. fixed定位属性

设置元素相对于浏览器窗口进行定位。它不会随着页面的滚动而移动。设置 z-index 可以调整它在其他元素之上的显示顺序。

在没有设置 z-index 值的情况下，按照元素在html中的顺序进行覆盖。例如：

<div class="box1">
  <p>我是上面的文字</p>
</div>
<div class="box2">
  <p>我是下面的文字</p>
</div>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
}
</style>

box1会覆盖在box2之上。

如果两个元素都设置了同样的定位属性和 z-index 值，则它们的覆盖顺序取决于它们在HTML中的顺序。后面的元素会覆盖前面的元素。例如：

<div class="box1">
  <p>我是上面的文字</p>
</div>
<div class="box2">
  <p>我是下面的文字</p>
</div>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  z-index: 1;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  z-index: 1;
}
</style>

box2会覆盖在box1之上。

如果设置了不同的 z-index 值，则 z-index 值大的元素会覆盖在 z-index 值小的元素之上。例如：

<div class="box1">
  <p>我是上面的文字</p>
</div>
<div class="box2">
  <p>我是下面的文字</p>
</div>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  z-index: 2;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  z-index: 1;
}
</style>

box1会覆盖在box2之上。

总结：

1. 如果两个元素都没有设置 z-index，则按照它们在HTML中的顺序进行覆盖。
2. 如果两个元素都设置了相同的 z-index，则按照它们在HTML中的顺序进行覆盖。
3. 如果两个元素都设置了不同的 z-index，则 z-index 值大的元素会覆盖在 z-index 值小的元素之上。

代码演示：

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  z-index: 2;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  z-index: 1;
}

.box3 {
  width: 200px;
  height: 200px;
  background-color: green;
  position: absolute;
  z-index: 3;
}

.box4 {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

可以看到，box3在最上面，box1在box2和box4之上。