定位

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该…

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

有一些非常有用的技术在特定的布局下依赖于position属性。同时，理解定位 (positioning) 也能够帮助你理解正常布局流 (normal flow)，理解把一个元素移出正常布局流 (normal flow) 是怎么一回事。

  • 静态定位（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
  • 相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。
  • 绝对定位（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
  • 固定定位（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
  • 粘性定位（Sticky positioning）是一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 position: fixed 一样定位。

静态定位

静态定位设置位置属性没有效果

image-20250423141730410

相对定位

相对定位就是占据原来的，标准文档流的位置，但是显示有一定偏移

没有设置偏移：

image-20250423142009064

设置偏移之后：

image-20250423142142624

设置top:20px导致元素向下移动20px，也就是相对于自己移动

绝对定位

绝对定位也会改变元素位置，但是脱离标准流了，也就是不会影响别的元素

和相对定位最大的不同就是，他的相对位置不是自己，而是父级绝对定位元素，如果父级没有且所有父级都没有，就是相对于整个页面(确切地说，是 <html>元素的距离)

在相对定位盒子中：

image-20250423142506027

父级没有相对定位，就像对于页面： image-20250423142851923

注意

对于相对定位，如果以百分比为单位，以页面大小为依据

image-20250423143132713

绝对定位是相对于父级元素，所以如果以百分比为单位，就是父级的大小为依据

image-20250423143225904

配合位移变换translate可以实现居中

因为translate中的百分比单位是相对于自身元素的。

image-20250423143710405

固定定位

固定定位 (fixed positioning) 同绝对定位 (absolute positioning) 一样，将元素从文档流 (document flow) 当中移出了。但是，定位的坐标不会应用于”容器”边框来计算元素的位置，而是会应用于视口 (viewport) 边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。

相当于是利用绝对定位没有父级容器的特性，不管这个元素定义在哪里，都能脱离任何限制，直接相对于窗口

<body>
    <div class="box one"></div>
    <div class="box two">
      <div class="absolute"></div>
      <div class="fix"></div>
    </div>
    <div class="absolute noparent"></div>
</body>

虽然定义不在最外层，但是不受任何影响

image-20250423144332294

粘性定位

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

粘性定位 (sticky positioning) 是最后一种我们能够使用的定位方式。它将默认的静态定位 (static positioning) 和固定定位 (fixed positioning) 相混合。当一个元素被指定了position: sticky时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了position: fixed一样。

不设置任何位置属性，表现没有任何变化：

image-20250423144831134

当设置位置属性之后，达到位置属性时，就会固定下来，类似fix，而且脱离文档流

而且还有特性就是，父级元素要消失的时候，会跟着一起消失，会被父元素带走：

评论

评论加载中……