html - CSS 相对位置 : width not considered

Question

我尝试构建 a pure CSS tree .我遇到了 block 之间水平线的问题(两个 block 在同一层)。我在以下 jsfiddles 中隔离了问题:

https://jsfiddle.net/8Lsv1ypd/3/

https://jsfiddle.net/8Lsv1ypd/4/

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 ，不考虑宽度(以像素为单位)，只显示垂直线，宽度“由浏览器强制”为 1 像素。

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

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

• position:absolute/相对/静态/固定
• 显示: block /内联
• 溢出:自动/可见；

我已经看过以下问题:

• 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?
• How to use CSS position(relative, absolute) with percentage (height, width) dimension?

以及以下文章:

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 元素成为 block 级元素因此你可以知道控制它的宽度和高度并且在你的情况下两者都被考虑但是你的元素相对于视口(viewport)定位因为有没有定位的祖先。它是隐藏的，因为你设置了一个负的左值，所以你看不到你设置的边框。

您需要使跨度 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