CSS布局的三种方式-优快云博客

本文链接：https://blog.youkuaiyun.com/BBQ__ZXB/article/details/128096986

本文详细介绍了CSS中的布局技术，包括绝对定位、相对定位和浮动。绝对定位将元素从正常文档流中移除，基于最近的定位父元素或body定位。相对定位则保持元素在文档流中的位置，但可相对于其原始位置偏移。浮动主要用于创建文字环绕图片效果，如左浮动和右浮动。此外，还展示了如何使用z-index解决重叠元素的层级问题，以及如何利用浮动实现左右固定和中间自适应的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绝对定位

绝对定位：
属性：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>