Question

我正在尝试生成一个带有分隔栏的分隔栏的进度条。此分隔栏（子<div/>）挂在进度条（父<div/>）下方。因此，我希望进度条覆盖所有分隔栏，除了挂在下面的部分。

这是一个非常简化的表示：

<html>
  <head>
    <style>

      body {
        width:500px;
        margin:0 auto;
        }
      #parent {
        width:50%;
        height:30px;
        background-color: yellow;
        }
      #child {
        width:1px;
        height:50px;
        background-color:black;
        float:right;
        margin-right:100px;
        }

    </style>
  </head>
  <body>

    <div id="parent">
      <div id="child"></div>
    </div>

  </body>
</html>

如何让进度条的黄色部分掩盖分隔栏的交叉部分？

这是一张代表我正在寻找的图片：

divider hangs below bar and is covered where they intersect by the bar/parent

提前致谢！

Answer 1

如果我说得对，那就不知道了，但为什么不给孩子元素一个保证金？（并减少子div的高度）

http://jsfiddle.net/7SMuJ/

如果这不是一个选项，您需要重新排列元素，以便您可以使用z-index

Answer 2

您可以在另一个容器上设置叠加层

#parent {
    width:50%;
    height:30px;

    }
  .innerParent{
     background-color: yellow;
        width:100%;
        position:absolute;
         top:0;
        left:0;
         display:block;
         height:30px;
    }
  #child {
    width:1px;
    height:50px;
    background-color:black;
    float:right;
    margin-right:100px;
    z-index:1;

    }

标记

  <div id="parent">
<div class="innerParent">
</div>
  <div id="child"></div>
</div>

Answer 3

将父级设置为position：relative将允许您绝对定位标记。既然他们都是z-index的合适类型，我会选择那条路线。这是一个jsfiddle：

http://jsfiddle.net/WXDZF/

似乎是最干净的解决方案。在这种情况下，你真的想要定位一些东西，而不是向上或向下推动某些东西，所以我建议不要以无机方式使用边距。

Answer 4

您必须将参数从子级切换为父级，反之亦然，请参阅下文。

  #parent {
    width:100px;
    height:30px;
    background-color: yellow;
    }
  #child {
    width:50%;
    height:30px;
    background-color:black;
    float:right;
    }

需要父<div>使用CSS </div> </div>覆盖子<div>的PART

4 个答案: