一、position初步认识

在CSS中，position属性用来设置元素的定位方式，可选值有static、relative、absolute、fixed和sticky。其中，static是默认值，表示元素处于文档流中的位置，不受top、right、bottom、left等属性影响；relative表示元素相对于自身的位置进行偏移，但是仍然占据原来的空间；absolute表示元素相对于最近的非static定位祖先元素进行偏移，如果不存在，则相对于文档的初始包含块。fixed表示元素相对于浏览器窗口进行偏移，即元素固定在屏幕上。sticky是relative和fixed的混合，表示元素在滚动到指定位置时变为固定定位，超出该位置又变回相对定位。以下是一个简单的示例代码：

<div style="position: relative; left: 50px; top: 50px;">
 <p>这是相对定位的元素，向右偏移50px，向下偏移50px。</p>
</div>
<div style="position: absolute; left: 100px; top: 100px;">
 <p>这是绝对定位的元素，相对于最近的非static定位祖先元素偏移，此处为body。</p>
</div>
<div style="position: fixed; left: 200px; top: 200px;">
 <p>这是固定定位的元素，即使页面滚动，也会一直停留在相对浏览器窗口的位置。</p>
</div>

二、z-index属性的使用

当我们使用position属性进行定位后，有可能会出现遮盖问题，即某些元素可能会位于其他元素之上，导致其他元素无法显示。为了解决这个问题，CSS中引入了z-index属性，用来设置元素的堆叠顺序，它的取值范围是整数或auto。整数的数值越大，元素就越靠近顶部。以下是一个简单的嵌套示例代码：

<div style="position: relative;">
 <p>这是父元素，不设置z-index属性。</p>
 <div style="position: absolute; left: 50px; top: 50px; z-index: 1;">
  <p>这是子元素1，z-index为1。</p>
 </div>
 <div style="position: absolute; left: 30px; top: 30px; z-index: 2;">
  <p>这是子元素2，z-index为2。</p>
 </div>
</div>

三、相对定位的应用

相对定位是我们使用最多的一种定位方式，它可以让元素在文档流中进行微调，从而实现更灵活的布局。以下是一些相对定位的应用实例： 1、利用相对定位实现在文本内部添加图标：

<p style="position: relative;">
 这是一段文字，<span style="position: relative; top: 2px; left: 5px;"></span>内部嵌入了一张图标。
</p>

2、利用相对定位实现垂直居中：

<div style="position: relative; height: 100px;">
 <div style="position: absolute; top: 50%; transform: translateY(-50%);">
  <p>这是一个垂直居中的元素。</p>
 </div>
</div>

四、绝对定位的应用

绝对定位可以让元素完全脱离文档流，实现更为自由的布局，它常用于实现弹出层、轮播图等效果。以下是一些绝对定位的应用实例： 1、利用绝对定位实现弹出层效果：

<style>
 .popup {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   background-color: #fff;
   z-index: 9999;
 }
</style>
<button onclick="document.querySelector('.popup').style.display = 'block'">点击打开弹出层</button>
<div class="popup" style="display: none;">
 <p>这是一个弹出层。</p>
 <button onclick="document.querySelector('.popup').style.display = 'none'">关闭弹出层</button>
</div>

2、利用绝对定位实现轮播图效果：

<div style="position: relative; width: 400px; height: 300px; overflow: hidden;">
 <div style="position: absolute; left: 0; top: 0; width: 1200px;">
  ...
 </div>
</div>

五、fixed定位的应用

fixed定位能够让元素始终固定在浏览器窗口中的某个位置，常用于创建导航栏或悬浮广告。以下是一些fixed定位的应用实例： 1、利用fixed定位实现顶部导航栏：

<style>
 .nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: #fff;
   z-index: 9999;
   border-bottom: 1px solid #ccc;
 }
</style>
<div class="nav">
 <ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a></li>
  <li><a href="#">关于我们</a></li>
  ...
 </ul>
</div>

2、利用fixed定位实现悬浮广告：

<style>
 .ad {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
   background-color: #fff;
   z-index: 9999;
   border-top: 1px solid #ccc;
 }
</style>
<div class="ad">
 <p>这是一个悬浮广告。</p>
</div>

六、sticky定位的应用

sticky定位是relative和fixed两种定位方式的混合，它可以实现元素在滚动到某个位置时变成固定定位，超出该位置后又变成相对定位。以下是一个sticky定位的应用实例：

<style>
 .sticky {
   position: sticky;
   top: 50px;
   background-color: #fff;
   border-bottom: 1px solid #ccc;
 }
</style>
<div style="height: 1000px;">
 <p>这是一段很长的文本，滚动时下面的黄色区块会变成固定定位。</p>
 <div class="sticky" style="height: 50px; background-color: yellow;">这是一个sticky定位的元素。</div>
</div>

七、总结

以上是关于position属性的详细介绍，它是CSS中最为常见的定位方式之一，能够实现各种布局效果。需要注意的是，在使用position属性时，一定要注意元素的定位顺序和堆叠顺序，避免出现遮盖等问题。

深入理解position属性