Q: How to make a moving div have a fixed-overlayed element inside? I'm trying to overlay a menu over an image but the container of the image is variable. I don't know where the image will be or how big it is. How can I position something absolute/fixed over an image without knowing where to set the top, left coordinates?
body {
  box-sizing: border-box;
  border: 0;
  padding: 0;
}
.main-container {
  height: 500px;
  width: 100%;
  background-color: #282828;
  padding: 0;
}
.moving-container {
  display: inline-block;
  margin-top: 100px;
  background-color: red;
  width: 100%;
  height: 100px;
}
.content {
  z-index: 1;
  width: 100%;
  height: 50%;
  background-color: white;
}
.overlay {
  z-index: 2;
  width: 300px;
  height: 150px;
  background-color: blue;
}

<body>
<div class="main-container">
    <div class="moving-container">
        <div class="content">

        </div>
        <div class="overlay">

        </div>
    </div>
</div>
</body>

Here's an example that doesn't work. You can see how the blue-border box that's the overlay object is pushed below the white-colored full-span div.
If I use position absolute, however or fixed, I get this.
I've tried to set the image as a background of the element, and then the inside of the element would be the menu, but without knowing how big the element is eg. a fixed px value, the background image won't appear (which is bigger than the menu itself).
So what do I do? I've come across translate, but I have not implemented that before.
In the examples above I have a fixed height dimension to work with where width is just 100%.
Thanks for any help.

A: Consider using a psedoclass to accomplish this task. No matter what the dimensions of .foo are, the inner overlay will cover the entire area.


.foo {
  background: lightgray;
  width: 150px;
  height: 150px;
  position: relative;
}

.foo::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  background: rgba(255, 0, 0, 0.5);
}
<div class="foo"></div>


