CSS 绝对定位与相对定位

 

目录

绝对定位

绝对定位是基于最近的一个定位了的父容器

z-index属性

相对定位

绝对定位和相对定位结合

---

 

 

 

 

绝对定位

属性：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>

绝对定位是基于最近的一个定位了的父容器

对于 "绝对定位的文字" 这个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>

"绝对定位的文字" 这个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>

z-index属性

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用

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

#i2{
	position: absolute;
	left: 50px;
	top: 200px;
	z-index: 1;
	width: 90px;
	height: 90px;
}
#i3{
	position: absolute;
	left: 50px;
	top: 30px;
	z-index: -1;
	width: 90px;
	height: 90px;
}

<p >正常文字a</p>
		<p >正常文字b</p>
		<p >正常文字c</p>
		<p >正常文字d</p>
		<p >正常文字e</p>
		<p >正常文字f</p>
		<p >正常文字g</p>
		<img id="i2" src="img/1.jpg" />
		<img id="i3" src="img/1.jpg" />

相对定位

属性：position
值： relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离

<style>
p.r{
  position: relative;
  left: 150px;
  top: 50px;
}
  
</style>
  
<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

绝对定位和相对定位结合

相对定位的文字3 在原来的位置的基础上，向右移动150个像素，但是又不占用原来的坑。

结合相对定位和绝对定位实现这个效果

p.r{
  position: relative;
  left: 150px;
  top: 0px;
}
p.s{
	position: absolute;
	left: 10px;
	top: 72px;
}
	<p >正常文字1</p>
		<p >正常文字2</p>
		<p class="r" >相对定位的文字3(不占坑)</p>
		<p  class="s">正常文字4</p>
		<p >正常文字5</p>