How do I get the red box on top of the gray box?

Question

I have this HTML:

<div id="container">
  <div id="content"></div>
  <div id="close-button"></div>
</div>

and this CSS:

#container {
  width: 50%;
}

#content {
  width: 100%;
  height: 50px;
  background-color: gray;
}

#close-button {
  float: right;
  margin-left: 100%;
  height: 50px;
  width: 50px;
  background-color: red;
}

JSFiddle: https://jsfiddle.net/Le53m70b/

How can I make the red box overlaid on top of the gray one, instead of being on a separate line? Note that the size of the container is not fixed, but regardless of its width, I'd like the gray box to cover 100% of it and the red box to be at its very right.

Read about [positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). — Sean, Dec 31 '21 at 01:38
Thanks @Sean , I did try a bunch of different positioning styling, but none of them seem to achieve the desired effect — wrongusername, Dec 31 '21 at 01:40
Does this answer your question? [How to overlay one div over another div](https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) — Sean, Dec 31 '21 at 01:44
@Sean thanks, that seems the same as the solution I finally found! Turns out it wasn't working before because the CSS attributes were being overridden — wrongusername, Dec 31 '21 at 01:56

score 0 · Answer 1 · answered Dec 31 '21 at 01:41

Ah, this finally works: https://jsfiddle.net/Le53m70b/1/

#container {
  position: relative;
  width: 50%;
}

#content {
  width: 100%;
  height: 50px;
  background-color: gray;
}

#close-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  width: 50px;
  background-color: red;
}

score 0 · Answer 2 · answered Dec 31 '21 at 04:12

You can use z-index property. Which is used to overlay an individual div over another div element.

#container{
        width: 200px;
        height: 200px;
        position: relative;
        margin: 20px;
    }
#content{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8; 
    }
#close-button{
        z-index: 9;
        margin: 20px; 
    }

How do I get the red box on top of the gray box?

2 Answers2