绝对定位
绝对定位：
属性：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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119781.html
