Home/ Questions/Q 6945105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:23:35+00:00

I am trying to produce a progress bar with a divider bar that separates

  • 0

I am trying to produce a progress bar with a divider bar that separates sections. This divider bar (child <div/>) hangs below the progress bar (parent <div/>). Thus, I want the progress bar to cover all of the divider bar except for the part that hangs below.

Here is a very simplified representation:

<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>

How can I get the yellow part of the progress bar to cover up the intersecting portion of the divider bar?

Here is an image representing what I’m looking for:

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

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting a parent to position: relative will allow you to absolutely position the marker. Since they’d both then be appropriate types for z-index, I would take that route. Here’s a jsfiddle:

    http://jsfiddle.net/WXDZF/

    Seems to be the cleanest solution. In this case you really are trying to position something, not push something up or down, so I would recommend staying away from using a margin in an inorganic way.

    • 0