CSS关于position属性的用法详解(绝对定位和相对定位的混淆)

position属性的概述

position属性定义了元素的定位方式，其可选值有四种：static,relative,absolute和fixed。

• static表示元素的默认定位方式，即元素在文档流中按照其自身的顺序排列
• relative表示按照元素自身的偏移量来确定元素在文档流中的位置，其不会影响其它元素的布局
• absolute表示将元素完全从文档流中移除，并按照最近的非静态定位祖先元素进行定位
• fixed表示将元素固定在页面视口中的指定位置上，其不会随页面的滚动而移动

绝对定位和相对定位的混淆

经常会出现混淆的情况是当绝对定位元素的祖先元素具有相对定位时，子元素的定位位置是相对于祖先元素而不是相对于文档流。

例如：

<div style="position:relative">
  <div style="position:absolute;top:10px;left:10px;">我是绝对定位元素</div>
</div>

以上代码中，子元素<div style="position:absolute;top:10px;left:10px;">是一个绝对定位元素，而祖先元素<div style="position:relative">是一个相对定位元素。在此情况下，子元素的位置是相对于祖先元素而不是文档流。

如何正确使用绝对定位和相对定位

使用绝对定位布局通常会造成网页布局的不稳定，因此应该尽量避免使用绝对定位元素。

相对定位布局则更加灵活，可通过对同级元素和该元素的父元素进行定位来达到最优的布局效果，从而尽可能避免使用绝对定位的情况。例如：

<div style="position:relative">
  <div style="position:relative;left:20px;">我是相对定位元素</div>
</div>

以上代码中，子元素<div style="position:relative;left:20px;">是一个相对定位元素，使用了left属性来实现横向偏移。父元素<div style="position:relative">也是一个相对定位元素，从而使子元素位置相对于该元素进行定位。

示例一：使用相对定位布局实现文字垂直居中

<style>
  .content {
    width: 300px;
    height: 300px;
    background-color: #ccc;
  }

  .text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<div class="content">
  <div class="text">我要垂直居中</div>
</div>

以上代码中，通过对文本元素的相对定位和使用top和transform属性实现了文本的垂直居中。

示例二：使用相对定位和绝对定位布局实现图片覆盖效果

<style>
  .wrapper {
    position: relative;
    width: 300px;
  }

  .wrapper img {
    max-width: 100%;
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    background-color: #000;
  }

  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
</style>

<div class="wrapper">
  <img src="example.jpg" alt="example image" />
  <div class="overlay"></div>
  <div class="text">我是文字覆盖层</div>
</div>

以上代码中，通过对包含图片的父元素进行相对定位，实现了对绝对定位元素的定位。通过对覆盖层和文字的绝对定位，实现了层叠效果和图片上增加文字的效果。