How To Cover A Div With Another Div As Overlay

Good day all, please I want to overlay a div(cover) over another div(area), I have checked similar posts to mine, but none is addressing my specific need. From my testing, it just

Solution 1:

take the both div inside a root div.Then set the root div position:relative and overlay div absolute. fix the height and width. and apply display:bloCK on overlay div. If still does not work than apply z-index.

This should be like: HTML:

<divclass="parent"><divid="area"class="area"></div><divclass="area cover"></div></div>

CSS:

.parent{
  position: relative;
  height:200px;
  weight: 200px;
}
.cover{
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 999;
}

Hopefully this will work for you.

Solution 2:

M8,

position fixed - fixes the element to the screen view. if you want to cover e.g. div1 by div2 you should put div2 INTO div1, than set position od div1 as relative, this will allow you tu set position absolute to div2 and than it wil be ABOVE it. if you setting something as absolute you need to have some refferer, this refferer is parent element with position relative, or lastly BODY if any relative parent exist.

The other solution is: If your div1 has known height you can use margin-top (minus) -HEIGHTofDIV1 px on DIV2 what will move it to the top and cover div1.

Solution 3:

you could make 'cover' a child of 'area'

<divid="area"class="area"><divclass="cover"></div></div>

.area {
  position: relative;
  flex: 10 auto;
  margin: 10px15px;
  padding: 10px;
}

.area.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity:0.5;
}