How to Overlay One Div Over Another Div

#container {  width: 100px;  height: 100px;  position: relative;}#navi,#infoi {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;}#infoi {  z-index: 10;}

<div id="container">  <div id="navi">a</div>  <div id="infoi">    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b  </div></div>

How to cover a div with another div as overlay

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.

How to place a div over another

You need to use z-index and position:absolute CSS properties. Additionally you need to also position your second DIV (which is on top of the other) by giving some values to top and left CSS attributes. Following is an example:

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

See this JSfiddle demo

Overlay one div on another side of div

To achieve the design shown in the image that you included, you could follow the next points :

• add position: relative rule to .promoBanner__container.
• remove the position: absolute rule from .promoBanner__image because you'll break your design as the height of .promoBanner__container will only be its padding as absolute positioning removes the element from the document flow so the height of the image included in .promoBanner__container will not be added to to .promoBanner__container. Doing so we'll be able to vertically center the .promoBanner__content element.
• vertically center .promoBanner__content by the help of both top and transform properties.

The next snippet will explain more how to achieve the task :

* {  box-sizing: border-box; /** padding and border are included in the width and height preventing some overflow cases (not all !) **/}

.promoBanner__container {  position: relative; /** add this so his children with absolute positionning are placed relative to it **/  width: 100%;  padding: 15px;}
.promoBanner__image {  /** removed absolute position **/  height: 100%;  width: 76.25%;}
/** new rules for the image itself **/.promoBanner__image > img {  height: 100%;  width: 100%;}
.promoBanner__content {  min-width: 400px;  max-width: 45%;   /** change the above rules to your desired values. If no max-width is applyied, the element will have 100% of its parent's width **/  position: absolute;  right: 0; /** the right property is used to prevent overflowing and to position the banner content in the desired place without any hacky calculations **/  /** next two rules are used to vertically align the banner content **/  top: 50%;    transform: translate3d(0, -50%, 0);  overflow-y: hidden;  padding: 34px 22px;  background-color: rgba(17, 24, 54, 0.95);  z-index: 2; /** ensure it's on top **/}

<div class="promoBanner__container">  <div class="promoBanner__image col-md-8">    <!-- <img src="<?php echo get_template_directory_uri();?>/images/latest_news.jpg"        alt="SPURSNEPAL" data-set="true"> -->    <img src="https://tot-tmp.azureedge.net/media/9833/thfc-media-header-v2.jpg?anchor=center&mode=crop&width=750" alt="" data-set="true">  </div>
  <div class="promoBanner__content col-md-4">    <a href="#">      <h3 class="promoBanner__title">        Latest News      </h3>    </a>    <p class="promoBanner__description">      Today's media stories brought to you by NewsNow.      <br>      <br> These stories have been specially selected from today's media. They do not necessarily represent the views or position of Tottenham Hotspur Football Club. For total Spurs news coverage, visit NewsNow.co.uk, the UK's #1 football news aggregator.    </p>  </div></div>

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
  margin:0;
}
.bgimage{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: url(https://images.pexels.com/photos/1324803/pexels-photo-1324803.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) no-repeat center;
}
.overlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
  background-color:rgba(0,0,0,0.5);
}
h1{
  position:relative;
  z-index:2;
}

<div class="bgimage">
</div>
<div class="overlay">
</div>
<h1>Title Goes Here</h1>

.parent {
  position: relative;
  width: 250px;
  height: 100px;
  background: #dbdbdb;
}

.child {
  position: absolute;
  height: 120px;
  width: 120px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #000;
  left: 10px;
  top: -10px;
}

.text {
  position: absolute;
  left: 135px;
  top: 50%;
  transform: translateY(-50%)
}

<div class="parent">
  <img src="https://i.picsum.photos/id/995/536/354.jpg?hmac=kARkIcQD-5FYzmRwd89uPn6yxoJvaCg43bkO-kABGGE" alt="" class="child">
  <span class="text">Lorem text</span>
</div>