CSS 面试要点：定位(Positioning)

2023-05-17 16:16:27 浏览数 (3)

定位允许开发者从正常的文档流布局中取出元素，并使它们具有不同的行为。

# 文档流

默认情况下，块级元素的内容宽度就是父元素宽的 100%，且与其内容一样高。内联元素的宽高与内容宽高一样。不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。

正常的布局流是将元素放置在浏览器视口内的系统。

默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——外边距折叠 (opens new window)。

https://codepen.io/cellinlab/pen/BaYqGZp

# 静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置。

代码语言：javascript复制
.position-static {
  position: static;
  background: yellow;
}

https://codepen.io/cellinlab/pen/abqRQyX

# 相对定位

与静态定位非常相似，占据在正常的文档流中，不过可以修改它的最终位置，包括让它与页面上的其他元素重叠。

代码语言：javascript复制
.position-relative {
  position: relative;
  background: yellow;
}

https://codepen.io/cellinlab/pen/YzeJREX

通过使用 top，bottom，left 和 right 属性，可以精确指定要将定位元素移动到的位置。

代码语言：javascript复制
.position-relative {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

https://codepen.io/cellinlab/pen/ExQdOor

# 绝对定位

代码语言：javascript复制
.position-absolute {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

https://codepen.io/cellinlab/pen/OJQBaZp

绝对定位的元素不再存在于正常文档布局流中，它位于自己的层独立于一切。这意味着，可以创建不干扰页面上其他元素的位置的隔离的 UI 功能，如弹出信息框和控制菜单，翻转面板，可以在页面上任何地方拖放的 UI 功能等。

同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。（即绝对定位元素应该位于从“包含元素”的顶部 30px，从左边 30px。）

# 定位上下文

哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的 position 属性。

如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且 <html> 元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在 <html> 元素的外面，并且根据浏览器视口来定位。

绝对定位元素在 HTML 源代码中，是被放在 <body> 中的，但是在最终的布局里面，它离页面 (而不是 <body> ) 的左边界、上边界有 30px 的距离。可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。

https://codepen.io/cellinlab/pen/QWQZJor

# z-index

代码语言：javascript复制
p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 10px;
}

https://codepen.io/cellinlab/pen/YzeJRbW

可以使用 z-index 属性更改绝对定位元素的堆叠顺序，z-index 是对 z 轴的参考。默认情况下，定位元素都具有 z-index 属性为 auto 实际值为 0。

https://codepen.io/cellinlab/pen/xxYymGb

# 固定定位

固定定位 fixed，与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着开发者可以创建固定的有用的 UI 项目，如持久导航菜单。

https://codepen.io/cellinlab/pen/dydgwGp

# 粘性定位

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

https://codepen.io/cellinlab/pen/OJQBrRQ

css positioning 布局 浏览器 面试

0 人点赞