我怎样才能设置我的水平线留在我的 div 后面？

Question

我不确定这里的幕后发生了什么。我无法将我的蓝线设置到我的 div 的后面。

我尝试将 z-index 调整为 0 ，该行位于我的 div 之上。

然后，我通过将 z-index 调整为以下来减少一个： -1 ，该行完全消失。 ???

我现在一头雾水。

CSS

我的线路class = .tl-line:

.tl-line:before {
        content: '';
        position: absolute;
        border-bottom: 1px #3498db dashed;
        z-index: 0;
        top: 27%;
        margin-top:-2px;
        right: 7%;
        left: 7%;
        width: 88%; 
    }

这是我的实时结果：Fiddle

Answer 1

.tl-box {
    position:relative;    /* add this */
    z-index:1;            /* add this */

对要与虚线重叠的任何其他元素执行相同的操作。

虽然您将虚线放在左箭头上方会有问题，因为您的 HTML 和 CSS 基本上放错了位置并且过于复杂。 JS滑块的东西也可以简化，但那是另一回事了。
我的建议是将左箭头 HTML 放在伪虚线元素之后，但你也需要修复它们的 CSS 位置。

Answer 2

添加以下内容：

.tl-box, .tl-right, .mp-arrow-container {
  position: relative;
  z-index: 1;       
  background: white;
}

这会将框放在虚线的顶部。需要背景以防止线渗漏。

Fiddle

我怎样才能设置我的水平线留在我的 div 后面？

How can I set my horizontal line to stay behind my divs?

html

css

css-position

z-index