CSS位置相对：不考虑宽度答案

【问题标题】：CSS position relative : width not consideredCSS位置相对：不考虑宽度
【发布时间】：2019-07-27 23:57:35
【问题描述】：

我尝试构建a pure CSS tree。我遇到了块之间的水平线问题（两个块处于同一水平）。我在以下 jsfiddles 中隔离了问题：

HTML：

<span class="first">First</span>
<span class="second">Second</span>

CSS：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  position: relative;
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 26px;
  width: 50px !important;
}

当CSS位置（in .second::before）is set to relative时，不考虑宽度（以像素为单位固定），只显示垂直线，宽度“被浏览器强制”为1像素。

当CSS位置(in .second::before)is set to absolute时，不考虑宽度，显示的是水平线，但线没有连接两个块。

我已经尝试了以下选项的多种组合：

位置：绝对/相对/静态/固定
显示：块/内联
溢出：自动/可见；

我已经看过以下问题了：

还有以下文章：

https://alistapart.com/article/css-positioning-101

【问题讨论】：

你需要 inline-block .. 伪元素默认是 inline 元素 ... 当设置绝对时它们变成块元素但在相对时保持内联
对于第二个问题， position:absolute 需要一个引用，所以你需要在 span 元素中添加 position: relative; 才能让 left/top 像你想要的那样工作
我同意@TemaniAfif，display: inline-block 和position: relative 是要走的路
是的......很棒的建议：jsfiddle.net/bhn4kso9 但我无法摆脱文本“第二”之前的空白。
是的，display:inline-block 总是会占用一些空间使用float:left; 而不是inline-block :)

标签： html css css-position

【解决方案1】：

当 CSS 位置（在 .second::before 中）设置为相对时，不考虑宽度（以像素为单位固定），仅显示垂直线，并且宽度“由浏览器强制”为 1 像素。

默认情况下伪元素是内联元素，设置position:relative 不会改变这一点，因此您不能将宽度和高度应用于元素。然后浏览器不会将宽度强制为1px，而是您设置的边框等于1px。高度也不起作用，元素和边框的高度由字体属性定义。

增加高度，你会发现什么都不会改变：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

现在增加font-size，你会看到一些变化

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  font-size:50px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

当CSS位置（in .second::before）设置为absolute时，不考虑宽度并显示水平线，但该线没有连接两个块。

当添加position:absolute 时，元素成为块级元素，因此您可以知道控制它的宽度和高度，并且在您的情况下两者都被考虑，但是您的元素相对于视口定位，因为没有定位的祖先。它是隐藏的，因为您设置了一个负左值，因此您看不到您设置的边框。

您需要将 span 设为position:relative 以使伪元素相对于 span 定位：

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
  position:relative;
}

.second::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 26px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

10.3.1 内联、不可替换的元素

“宽度”属性不适用 ^ref

10.6.1 内联、不可替换的元素

“高度”属性不适用。内容区域的高度应根据字体，^ref

浮动、绝对定位元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是 ' 的块框可见的'（除非该值已传播到视口）为其内容建立新的块格式化上下文。 ^ref

在绝对定位模型中，框相对于其包含块
显式偏移
如果元素有'position: absolute'，则包含块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”，...如果没有这样的祖先，则包含block 是初始包含块。 ^ref

【讨论】：

是的！完美而令人敬畏的答案。我还有一些调整要执行，但主要核心在那里：jsfiddle.net/hkuwgpms 非常感谢。