如何使水平线穿过其他元素？答案

【问题标题】：How to make horizontal lines passing through other elements?如何使水平线穿过其他元素？
【发布时间】：2017-01-12 02:33:06
【问题描述】：

如何使水平线穿过滑块，如下图所示：(https://www.audiolabs-erlangen.de/resources/webMUSHRA)

另外应该如何完成这种类型的界面（例如固定高度或百分比）。它应该基于表格吗？目前我有这样的基于通量布局（angular2-flex）的东西，但我不知道如何制作这些水平线。

代码：

 <div class="flex-item hmax-percentage" fx-flex="80">
                        <div class="flex-container hmax-percentage" fx-layout="row" fx-layout-align="center stretch">
                            <div class="flex-item">
                                <div class="flex-container" fx-layout="column"
                                     fx-layout-align="space-around stretch" style="height:80%">
                                    <pre class="flex-item" fx-flex="20"> 80-100 - Excellent</pre>
                                    <pre class="flex-item" fx-flex="20">  60-80 - Good</pre>
                                    <pre class="flex-item" fx-flex="20">  40-60 - Fair</pre>
                                    <pre class="flex-item" fx-flex="20">  20-40 - Poor</pre>
                                    <pre class="flex-item" fx-flex="20">   0-20 - Bad</pre>
                                </div>
                            </div>
                            <template ngFor let-sample [ngForOf]="samplesKeyMap">
                                <sample-slider class="flex-item hmax-percentage" [sampleKey]="sample.currentSampleKey"
                                               (onChangeEvent)="onSampleSliderChangeHandler($event)"
                                               (onButtonClick)="onSampleSelectToPlay($event)"></sample-slider>
                            </template>
                        </div>
                    </div>

Plunker：http://plnkr.co/edit/G4RK8T4OMPzs1E0Gcoaj?p=preview

【问题讨论】：

你的代码有工作演示（例如小提琴）吗？
是的，我刚刚创建（请看帖子）。您认为是否可以使用 flex 布局来做到这一点？也许css中有类似图层的东西？

标签： html css flexbox

【解决方案1】：

我已经使用绝对定位和百分比顶部平移的 div（高度：2px；背景颜色：黑色；宽度：100%；）实现了网格水平线。在我的例子中，有 5 行，我的滑块容器是 90% 的高度，所以平移因子是 90/5 = 16%。

<div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch">

  <div style="position: relative; height:100%;" class="fx-flex">

    <div style="position: absolute; top:0%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:16%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:32%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:48%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:64%; width: 100%; height:2px; background-color:black;">
    </div>
    <div style="position: absolute; top:80%; width: 100%; height:2px; background-color:black;">
    </div>

    <div class="flex-container hmax-percentage" fxLayout="row" fxLayoutAlign="center stretch">

      <template ngFor let-sample [ngForOf]="samplesKeyMap">
        <sample-slider class="flex-item hmax-percentage"></sample-slider>
      </template>
    </div>
  </div>

演示： https://plnkr.co/edit/t1OL23PZcTgTE9DoSfLY?p=preview

【讨论】：