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

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.

CodePudding user response：

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

CodePudding user response：

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