SOURCE

console 命令行工具 X clear

                    
>
console
<p>正常文字1</p>
<p>正常文字2</p>
<div class="absdiv">
  绝对定位的div
  <!-- 
    1、设置绝对定位, 相当于在文档中删除该元素 
    2、绝对定位基于最近的定位的父容器
  -->
  <p id="abs">绝对定位的文字1</p>
</div>
<div>
  没有定位的div
  <!-- 3、父容器没有定位, 所以abs1基于body定位 -->
  <p id="abs1">绝对定位的文字2</p>
</div>
<!-- z-index 因为绝对定位就可能出现元素重复的情况, z-index 代表权重, 值大的显示在上面, 覆盖值小的 -->
<p style="z-index:1">正常文字4</p>
<p>正常文字5</p>
<p>正常文字6</p>

<p id="abs2" style="z-index:-1">正常文字7</p>

<div class="relative">
  相对定位的div
  <p>正常文字1</p>
  <p>正常文字2</p>
  <p class="relative">相对定位</p>
  <p>正常文字4</p>
</div>

<!-- 练习 相对定位不占坑 -->
  
<p>不占坑1</p>
<p>不占坑2</p>
<!-- 也可以外面是relative里面是absolute -->
<div class="abs">
  <div class="relative">
    <p >相对定位不占坑3</p>
  </div>
</div>
<p>不占坑4</p>
<p>不占坑5</p>
#abs{
  position:absolute;
  left: 200px;
  top: 50px;
}

#abs1{
  position:absolute;
  left: 100px;
  top: 10px;
}
#abs2{
  position:absolute;
  left: 50px;
  top: 110px;

  background-color:#fff;
}
#p1{
  z-index:10;
}
.absdiv{
  position: absolute;
  left: 150px;
  top: 50px;
  border:1px solid blue;
  width: 200px;
}

.relative{
  position:relative;
  left: 0px;
  top: 0px;
}

.abs{
  position: absolute;
  left: 150px;
  top: 0px;
}

.relative_abs{
  position:absolute;
  left: 150px;
  
}