CSS 相对位置：不考虑宽度

Question

我尝试构建 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位置（在.second::before）is set to relative时，不考虑宽度（固定像素），只显示竖线，宽度为"forced by the browser" 到 1 个像素。

当CSS位置（在.second::before）is set to absolute时，不考虑宽度并显示水平线，但该线未连接两个块.

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

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

我已经看过以下问题:

CSS position relative without relative width?
CSS relative div's width auto extend by absolute div
CSS relative, absolute positionings
CSS Make the absolute child width independent from the relative parent width
How does css position impact element width/height?

以及以下文章：

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

Answer 1

When the CSS position (in .second::before) is set to relative, the width (fixed in pixels) is not considered, only the vertical line is displayed and width is "forced by the browser" to 1 pixel.

伪元素默认是内联元素，设置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>

When the CSS position (in .second::before) is set to absolute, the width is not taken into account and the horizontal line is displayed, but the line is not joining the two block.

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

您需要设置跨度 position:relative 以使伪元素相对于跨度定位：

.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 Inline, non-replaced elements

The 'width' property does not apply ^ref

10.6.1 Inline, non-replaced elements

The 'height' property does not apply. The height of the content area should be based on the font, ^ref

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. ^ref

In the absolute positioning model, a box is explicitly offset with respect to its containing block

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', ... If there is no such ancestor, the containing block is the initial containing block. ^ref

CSS 相对位置：不考虑宽度

CSS position relative : width not considered

html

css

css-position