css - 子 div 需要重叠在其父级上，以便获得父级的背景颜色

Question

我有以下结构:

<li style="border-left-color: green">
  <div class="some icon">
   <div class="another icon">
  </div>
  </div>
</li>

我需要让具有“某些图标”的 div 与我的 li 元素的左边框重叠，以便该图标出现在绿色条内。

子 div 可以重叠在它的父 div 上吗？

Answer 1

是的。

像下面这样的东西应该可以工作，但是，你的类名不应该包含空格:

li {
    position: relative;
    height: // whatever your desired height is
    border-left: 20px solid green;
}

.some_icon {
    position: absolute;
    top: 0;
    left:-20px; // this should be the same as, or similar to, the li border width
}

Here's an example .