Question

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

我尝试将z-index调整为0，该行保持在我的div之上。

然后，我通过调整z-index来减少一个： -1，这条线完全消失了。 ???

我现在很无能为力。

CSS

我的班级= .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之后？

2 个答案: