绝对定位

绝对定位：
属性：position 值：absolute

<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>

在这里插入图片描述
说明：设置了绝对定位的元素，相当于该元素被从原文档中删除了，所以“正常文字4”会紧接着出现。

绝对定位是基于最近的一个定位了的父容器
如果没有定位的div容器，默认是body

<style>p.abs{position: absolute;left: 550px;top: 0;}</style><div style="position: absolute;width: 700px;"><p >正常文字1</p><p >正常文字2</p><p class="abs" >绝对定位的文字3</p><p >正常文字4</p><p >正常文字5</p></div>

在这里插入图片描述
z-index

通过绝对定位可以把一个元素放在另一个元素上，这样位置就会重复，会存在一个谁掩盖谁的问题
z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

相对定位

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

在这里插入图片描述

浮动

属性：float
值： left,right
可以用于文字环绕图片的效果

左侧固定，右侧自动占满

<style>.left{width:200px;float:left;background-color:pink}.right{overflow:hidden;background-color:lightskyblue;}
</style><div class="left">左边固定宽度</div><div class="right">右边自动填满</div>

在这里插入图片描述
2. 左右固定，中间自适应

<style>.left{width:200px;float:left;background-color:pink}.right{width:200px;float:right;background-color:pink}.center {overflow:hidden;   background-color:lightblue
</style><div class="left">左边固定宽度</div><div class="right">右边固定宽度</div><div class="center">中间自适应</div>

在这里插入图片描述
3. 贴在下方

<style>#div1 {position: relative;height: 300px;width: 90%;background-color: skyblue;}#div2{position: absolute;bottom: 0;height: 30px;width: 98%;background-color: lightgreen;}</style><div id="div1"><div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面</div></div>