定位（position）

最新推荐文章于 2024-05-06 19:13:09 发布

JJ_Smilewang

最新推荐文章于 2024-05-06 19:13:09 发布

阅读量2.7k

点赞数 11

分类专栏： html5和CSS3基础文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124045461

版权

html5和CSS3基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

定位是三种传统布局方式之一，虽然浮动可以帮助我们把几个盒子排在一行，也可以把一个盒子放在左边，一个放在右边，但是如果我们需要某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子；或者当我们滚动窗口时，盒子是固定屏幕在某个位置的。这些效果，标准流或浮动可以快速实现吗？

答案显示是否定的，所以这就需要定位（position）来帮忙。

1.定位的组成

s所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子，其规则为：定位 = 定位模式 + 边偏移 。

1.1 定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

1.2.边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

2. 静态定位（默认）

静态定位是元素的默认定位方式，无定位的意思，即元素以标准流方式显示。

语法：

选择器 { position: static; }    /*默认定位方式，一般不会在代码上书写*/

注意：静态定位没有边偏移，在布局时很少用到。

3. 相对定位 relative（重要）

所谓相对定位，是元素在移动位置时，是相对于自身原来位置进行偏移。

<style>
   .box {
      width: 350px;
      padding: 15px;
      border: 2px solid #ccc;
   }
   .div1,
   .div2,
   .div3 {
      line-height: 100px;
      margin-bottom: 10px;
   }
   .div1 {
      background-color: pink;
      border: 1px dashed palevioletred;
   }
   .div2 {
      background-color: skyblue;
      border: 1px dashed rgb(16, 133, 179);
      position: relative;
      left: 20px;
      /* 相对原来的位置，距离左边20px */
      top: 30px;
      /* 相对原来的位置，距离顶部30px */
   }
   .div3 {
      background-color: orange;
      border:1px dashed orangered;
   }
</style>
<body>
   <div class="box">
        <div class="div1">第一个盒子</div>
        <div class="div2">第二个盒子</div>
        <div class="div3">第三个盒子</div>
   </div>
</body>

没有添加定位前的结果如左图：给第二个盒子添加了相对定位和对应偏移量后效果如右图：

通过两个图的对比，可以发现相对定位会保留原来的位置，不会影响其他盒子的位置。

4. 绝对定位 absolute（重要）

所谓绝对定位是元素在移动位置时，是相对于它祖先元素来说的。

<style>
    * {
      margin: 0;
      padding: 0;
        }
    body {
      position: relative;
   }
   .box {
      position: relative;
      margin:30px auto;
      width: 350px;
      padding: 15px;
      border: 2px solid #ccc;
   }
   .div1,
   .div2,
   .div3 {
      line-height: 100px;
      margin-bottom: 10px;
   }
   .div1 {
      background-color: pink;
      border: 1px dashed palevioletred;
   }
   .div2 {
      background-color: skyblue;
      border: 1px dashed rgb(16, 133, 179);
      position: absolute;
      left: 0;
      top: 0;
   }
   .div3 {
      background-color: orange;
      border:1px dashed orangered;
   }
</style>
<body>
   <div class="box">
        <div class="div1">第一个盒子</div>
        <div class="div2">第二个盒子</div>
        <div class="div3">第三个盒子</div>
   </div>
</body>
下图是只给第二个盒子添加绝对定位，然后偏移量为left: 0; 和 top: 0; ，那么此时没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

下图是依然给第二个盒子添加绝对定位，然后偏移量为left: 0; 和 top: 0; ，同时给body添加相对定位，那么此时会以body为基准进行定位。

下图是依然给第二个盒子添加绝对定位，然后偏移量为left: 0; 和 top: 0; ，同时给body和类选择器为box的盒子都添加相对定位，那么此时会以.box这个盒子为基准进行定位。

通过以上图片的对比，可以总结出以下几点：

①绝对定位不会保留原来的位置（脱标），那后面盒子就会往上占了它的位置；

②如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位；

③如果祖先元素有定位（可以是相对、绝对或者固定定位），则以最近的已经定位的祖先元素为基准移动位置。

④虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。

5. 固定定位 fixed （重要）

所谓固定定位，是元素固定于浏览器可视区的位置。主要特点为：在浏览器页面滚动时元素的位置不会改变。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        height: 1500px;
    }
    div {
        width: 100px;
        line-height: 100px;
        text-align: center;
    }
    div:nth-child(1) {
        background-color: pink;
        /* 这个盒子使用了绝对定位，但是父元素没有定位，那么会以浏览器窗口为基准进行偏移 */
        position: absolute;
        right: 0;
        top: 500px;
    }
    div:nth-child(2) {
        background-color: skyblue;
        position: fixed;
        right: 0;
        top: 200px;
    }
</style>
<body>
    <div>绝对定位 absolute </div>
    <div>固定定位 fixed </div>
</body>
代码执行结果如图所示。

理论上绝对定位距离上边线的距离更远，应该在固定定位的下方，但是由于绝对定位会随滚动条的滚动而移动，可固定定位却不会随着滚动条的滚动而移动。所以我将滚动条往下滚动后，就出现了上图的状态。

从执行代码的结果可以总结出以下几点信息：

①固定定位是相对浏览器窗口来定位的，与父元素没有关系；

②偏移量不会随滚动条的移动而移动；

③脱离文档流，不再占有原来位置，是浮起来的。

6. 总结

1. 我们学习定位时，一定要记住相对定位、固定定位、绝对定位两个大的特点：

①是否占有位置（脱标否）②以谁为基准进行移动位置。
2. 学习定位，重点要学会子绝父相，这是开发中最常用的。

JJ_Smilewang

关注

11
点赞
踩
51

收藏

觉得还不错? 一键收藏
1
评论
定位（position）

定位是三种传统布局方式之一，虽然浮动可以帮助我们把几个盒子排在一行，也可以把一个盒子放在左边，一个放在右边，但是如果我们需要某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子；或者当我们滚动窗口时，盒子是固定屏幕在某个位置的。这些效果，标准流或浮动可以快速实现吗？答案显示是否定的，所以这就需要定位（position）来帮忙。1.定位的组成s所谓定位，简单的来说就是将盒子定在某一个位置。所以定位其实也是按照规则进行摆盒子，其规则为：定位 = 定位模式 + 边偏移。1.1 定位模式.
复制链接

扫一扫