html - 如何让 child 不向 parent 展示？

Question

我有一个列表，我在其中放置了一个 div，但不想显示 div 所在的列表。这是列表

<div class="daily-view">
    <ul class="hours">
        <li>
            <div class="appt">Jason Hamm</div>
            <div class="lines"></div>
            <div class="lines"></div>
        </li>
    </ul>
</div>

以及列表的样式:

.daily-view .hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.daily-view .lines {
  border-bottom: 1px solid #ccc;
  height: 20px;
}
.appt {
  border: solid 1px #ccc;
  padding: 5px;
  border-radius: 5px;
  margin-left: 4%;
  position: absolute;
}

我希望 appt 类不显示其背后的任何内容。现在它显示如下:

您可以看到背景线穿过 div。我尝试了 z-index，但没有用。我该怎么做？

Answer 1

将 background: #fff 添加到您的 .appt 容器中。

http://jsfiddle.net/furudh0g/