前端必知：定位的含义！

池鱼ipou
313 阅读5分钟

引言：

在网页布局中，定位是一种控制元素在页面上位置的技术，通过使用 CSS 中的 position 属性，可以精确地控制元素的位置，使其脱离默认的文档流，或者相对于某个参考点进行定位，定位的产生和发展有其特定的原因和含义，接下来我将输出一些我最近对于定位的学习与理解，希望对你有所帮助。

首先我们可以了解一下定位产生的原因：

  • 精确控制元素位置：默认的文档流布局有时无法满足复杂的布局需求。通过定位，可以精确地控制元素的位置，实现更灵活的布

  • 解决重叠和覆盖问题：在某些情况下，元素需要重叠或覆盖其他元素。默认的文档流布局无法实现这一点，而定位可以解决这个问题。

  • 响应式设计：在响应式设计中，元素的位置和大小需要根据屏幕尺寸进行动态调整。定位可以帮助实现这种动态调整。

  • 动画和交互：在现代网页中，动画和交互效果越来越重要。定位是实现这些效果的基础。

5.jpg

接下来就可以展开有关定位的介绍了：

CSS 提供了多种定位方式，常见的定位方式有：static、relative、absolute 和 fixed。

  1. 静态定位（Static） ： static 是元素的默认定位方式， 静态定位的元素按照文档流的顺序排列，不受 left、right、top 和 bottom 属性的影响。

  2. 相对定位（Relative） ：relative 定位的元素相对于其在文档流中的默认位置进行移动，使用 left、right、top 和 bottom 属性可以调整元素的位置，但元素在文档流中的位置不变。

  • 例如：

        .r {
      position: relative;
      left: 20px;
      top: 10px;
    }

  • 上面的例子中，.r 会向右移动 20 像素，向下移动 10 像素，但其在文档流中的位置仍然保持不变。

  1. 绝对定位（Absolute） ：absolute 定位的元素会脱离文档流，不再占据文档流中的空间,绝对定位的元素会相对于其最近的已定位（position 不为 static）祖先元素进行定位。

注意：如果没有找到已定位的祖先元素，则会相对于 body 进行定位。

  • 例如：

       .father {
     position: relative;
   }
   .son{
     position: absolute;
     left: 20px;
     top: 10px;
   }

  • 面的例子中，.son会相对于 .father 进行定位，向右移动 20 像素，向下移动 10 像素。

  1. 固定定位（Fixed） ： fixed 定位的元素会脱离文档流，不再占据文档流中的空间,固定定位的元素会相对于浏览器窗口进行定位，即使页面滚动，固定定位的元素也不会移动。

  • 例如：

       .f {
     position: fixed;
     left: 20px;
     top: 10px;
   }

  • 在上面的例子中，.f 会相对于浏览器窗口进行定位，向右移动 20 像素，向下移动 10 像素。

文档流（Document Flow）

文档流是指 HTML 文档中元素的默认排列顺序,在文档流中，元素按照它们在 HTML 代码中的顺序从上到下、从左到右排列。文档流中的元素可以分为两类：

  • 块级元素（Block Elements） ：块级元素独占一行，每个块级元素都会在新的一行开始，并且其后的元素也会另起一行。

  • 行内元素（Inline Elements） ： 行内元素不会独占一行，多个行内元素可以在同一行显示，直到行宽不足以容纳下一个元素,行内元素的宽度和高度不能直接设置，它们的宽度由其内容决定。

定位与文档流有什么关系？

  • 相对定位（Relative Positioning） ：相对定位的元素会相对于其在文档流中的默认位置进行移动，但其在文档流中的位置不变,而且它仍然会占据文档流中的位置，但可以通过 left、right、top 和 bottom 属性进行微调。

  • 绝对定位（Absolute Positioning） ：绝对定位的元素会脱离文档流，不再占据文档流中的空间。它会脱离文档流，其他元素会像它不存在一样进行排列。

  • 固定定位（Fixed Positioning） ：固定定位的元素会脱离文档流，不再占据文档流中的空间。它会脱离文档流，其他元素会像它不存在一样进行排列。

接下来就可以开始实战了！！！ 2.jpg

实例分析

假设我们有以下 HTML 与css结构：

<div id="box1">
    </div>
    <div id="box2">
        <div id="box3">box3</div>
    </div>

 * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 200px;
            height: 200px;
            margin: 20px;
            padding: 5px;
            border: 1px solid red;
            background-color: green;
        }

        #box2 {
            margin: 10px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        #box3 {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
  • 默认情况下，#box1、#box2 会按照文档流的顺序从上到下排列，#box3会在box2的左上角，如图所示：

image.png

  • 合理运用定位，我们可以自由的调整各个盒子的位置，以达到我们想要的功能。

  1. 相对定位：

    #box1 {
    position: relative;
    top: 30px;
    left: 30px; 
}
  • #box1 会向右移动 30 像素，向下移动 30 像素，但其在文档流中的位置不变,如图所示：

image.png

  1. 绝对定位：

    
#box3 {
    position: absolute;
    top: 10px;
    left: 10px; 
}
  • #box2 会脱离文档流，相对于页面左上角进行定位，向右移动 10 像素，向下移动 10 像素，如图所示：

image.png

  1. 固定定位：

    #box3 {
  position: fixed;
  left: 100px;
  top: 50px;
}
  • #box3 会脱离文档流，相对于浏览器窗口进行定位，向右移动 100 像素，向上移动 50 像素，如图所示：

image.png

  • 通过这些实例，我们可以看到不同定位方式对元素在页面上的位置和文档流的影响，合理使用定位方式可以实现复杂的布局效果。

总结

在前端开发中，理解文档流和定位方式是非常重要的。文档流决定了元素的默认排列顺序，而定位方式则允许我们对元素的位置进行精确控制。通过合理使用 static、relative、absolute 和 fixed 定位，可以实现各种复杂的布局效果，提高页面的美观性和功能性。希望本文对你有所帮助！

avatar
文章
阅读
粉丝