CSS 面试要点：定位(Positioning)
CSS 面试要点：定位(Positioning)
定位允许开发者从正常的文档流布局中取出元素，并使它们具有不同的行为。
# 文档流
默认情况下，块级元素的内容宽度就是父元素宽的 100%，且与其内容一样高。内联元素的宽高与内容宽高一样。不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。
正常的布局流是将元素放置在浏览器视口内的系统。
默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——外边距折叠 (opens new window)。
https://codepen.io/cellinlab/pen/BaYqGZp
# 静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置。
.position-static {
position: static;
background: yellow;
}https://codepen.io/cellinlab/pen/abqRQyX
# 相对定位
与静态定位非常相似，占据在正常的文档流中，不过可以修改它的最终位置，包括让它与页面上的其他元素重叠。
.position-relative {
position: relative;
background: yellow;
}https://codepen.io/cellinlab/pen/YzeJREX
通过使用 top，bottom，left 和 right 属性，可以精确指定要将定位元素移动到的位置。
.position-relative {
position: relative;
background: yellow;
top: 30px;
left: 30px;
}https://codepen.io/cellinlab/pen/ExQdOor
# 绝对定位
.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
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，基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
腾讯云开发者
