示例1:

絕對定位

屬性：position
值： absolute
設定了絕對定位的元素，相當於該元素被從原文件中刪除了
所以”正常文字4“會緊接著出現在 ”正常文字2“後面，而不會留下空檔

<style>
p.abs{
  position: absolute;
  left: 150px;
  top: 50px;
}
 
</style>
 
<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >絕對定位的文字3</p>
<
 
p >正常文字4</p>
<p >正常文字5</p>

示例2:

絕對定位是基於最近的一個定位了的父容器

對於 "絕對定位的文字" 這個p，其定位了的父容器即 class="absdiv" 的div
所以 "絕對定位的文字" 這個p 出現的位置是以這個div 為基礎的

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
.absdiv{
  position: absolute;
  left: 150px;
  top: 50px;
  width:215px;
  border
 
: 1px solid blue;
}
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<div class="absdiv">
這是一個定位了的div
<p class="abs" >絕對定位的文字</
 
p>
</div>

示例3:

如果沒有定位了的父容器

"絕對定位的文字" 這個p 的父容器div，並沒有定位。 所以它的”最近的一個定位了的父容器” 即body

<style>
p.abs{
  position: absolute;
  left: 100px;
  top: 50px;
}
 
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<div>
這個div沒有定位
<p class="abs" >絕對定位的文字</p>
</div>

示例4:

z-index

通過絕對定位可以把一個元素放在另一個元素上，這樣位置就重複了。

重複了，就存在一個誰掩蓋誰的問題。 這個時候就可以使用

z-index屬性， 當z-index的值越大，就表示放上面，z-index:越小就表示放下面。

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
   
  img#i2{
  position: absolute;
  left: 60px;
  top: 120px;
  z-index:-1;
}
  
</style>
  
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
 
<img id="i1" src="https://how2j.cn/example.gif" />
<img id="i2" src="https://how2j.cn/example.gif" />