css布局学习

绝对定位

position: absolute

1、绝对定位是基于最近的一个定位了的父容器
2、如果没有父容器没有定位的情况：

<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:越小就表示放下面。
相对定位
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
浮动