何时选择position而非Flexbox定位元素？相关定位疑问解答

1. 为啥不优先用position居中文本？ #

Flexbox做居中的优势太明显了：代码简洁，一行display: flex; align-items: center; justify-content: center;就搞定，不用手动计算偏移量，容器或内容大小变化时能自动适配，还能轻松处理多个元素的居中排列。

而用position的话，得先给父元素设position: relative，再给文本容器加position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，步骤繁琐不说，后续改布局时维护成本高。而且position居中多个元素的话，很容易出现重叠，还要额外调整。

2. 用position居中文本会有啥后果？ #

• 父容器塌陷：absolute定位的元素会脱离正常文档流，父容器不会计算它的尺寸，如果父容器里只有这个元素，高度会直接变成0，可能打乱后续布局。
• 维护成本高：要是容器或文本大小改动，你得重新调整偏移值，不像Flexbox能自动适配。
• 元素重叠：如果父容器里还有其他正常流元素，absolute元素会直接覆盖在上面，得手动调整z-index或修改布局结构。
• 响应式适配麻烦：要是用固定像素值定位，容器缩小时元素很容易偏离居中位置，就算用百分比加transform，适配灵活性也远不如Flexbox。

3. 文本能不能用position？ #

当然可以。如果是裸文本（比如<div>我是文本</div>），直接给父div设置position没问题；如果要单独给文本加position，得把文本套进span之类的标签里，再给标签设置position。只要给文本元素（或包裹它的标签）设了非static的position，浏览器会自动赋予它块级特性，支持top/left这类偏移属性。

举个实现例子：

.box1 {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.box1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. span元素能应用position吗？ #

必须能。span是inline元素，但只要给它设置position: relative/absolute/fixed/sticky（除了默认的static），它就会获得块级元素的特性，不仅能设置position偏移，还能定义width、height这些属性。上面的例子就是用span实现定位的，完全没问题。

5. 用position:absolute相对父元素boxn定位会出问题吗？ #

大概率会遇到这些坑：

• 父容器塌陷：如果boxn没设置固定宽高，且内部只有这个absolute元素，boxn的高度会变成0，影响周围布局。
• 定位跑偏：如果boxn的父元素也设置了非static的position，absolute元素会相对于最近的那个祖先定位，而不是boxn，容易出现位置错误，得确保boxn的position是relative/absolute/fixed。
• 元素覆盖：boxn里的其他正常流元素会被absolute元素盖住，得手动调整层级或布局。
• 适配性差：如果用固定像素值定位，当boxn大小变化时，元素很容易偏离预期位置，就算用百分比，灵活度也远不如Flexbox。

内容的提问来源于stack exchange，提问作者Coderey123