4

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 appears below the main div(area). The container div(reader) has a position of fixed, that is the only way i've been able to do fill the whole screen. Please check my code below. Thanks

 <style>
    html,
    body {
       box-sizing: border-box;
       min-height: 100%;
       margin: 0;
       padding: 0;
    }

    #reader {
       position: fixed;
       width:100%;
       height: 100%;
       top: 10;
       left: 20;
       bottom: 10;
       right: 20;
       background: wheat;
       display: flex;
       flex-direction: column;
    }

    #reader #toolbar {
      flex: 0 1 auto;
      display: flex;
      justify-content: space-between;
      background: rgba(0,0,0,0.05);
      padding: 10px;
    }

    #reader #toolbar .left {
      flex: 0 1 auto;
    }

    #reader #toolbar .center {
      flex: 0 1 auto;
    }

    #reader #toolbar .right {
      flex: 0 1 auto;
    }

   .area {
      flex: 1 0 auto;
      display: flex;
      margin: 10px 15px;
      padding: 10px;
    }

    #reader #area div {
      position: absolute;
      width: 90%;
      top: 10px;
      left: 5%;
      bottom: 10px;
      right: 5%;
    }

    .cover {
      z-index: 9;
    }

  </style>

  <div id="reader">
     <input type="file" id="bookChooser">
     <select id="toc"></select>
     <div id="area" class="area"></div>
     <div class="area cover"></div> <!-- This should cover the div area above, not pushed down -->
     <button id="prev" type="button"><</button>
     <button id="next" type="button">></button>
  </div>
Timothy Ayodele
  • 185
  • 1
  • 1
  • 9

3 Answers3

8

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:

<div class="parent">
     <div id="area" class="area"></div>
     <div class="area cover"></div>
</div>

CSS:

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

Hopefully this will work for you.

Khalid Khan
  • 3,017
  • 1
  • 11
  • 27
Sudipta Das
  • 140
  • 6
  • Thanks @Sudipta Das for your response, actually the parent div must be 100% width and height, I will try your code and get back to you. Thanks – Timothy Ayodele Apr 17 '21 at 12:31
0

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
szymanskicode
  • 13
  • 7
0

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

<div id="area" class="area">
  <div class="cover"></div>
</div>

.area {
  position: relative;
  flex: 1 0 auto;
  margin: 10px 15px;
  padding: 10px;
}

.area .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity:0.5;
}
eminsh
  • 233
  • 1
  • 2
  • 9