kessi-cpa Library logo (4.0 KB)

How to position a div on top of another div


Sometimes, you would want to show an HTML element on top of another. See the example below - on top of the image, we displayed a question and a button to allow the user to answer the question.

beach in a sunny day (43 KB)

Win a trip for two if you can answer this question: 1 - 1 = ?

We achieved this by using two div (a container div and an inside div). To position one div on top of another div, we need to set the position property as folow:
  • For the container div: relative
  • For the inside div: absolute
See the example below. The container div is gray and the inside div is orange


Click one of the buttons below to position the div anywhere in the container div:

Top Left
Top Right
Bottom Right
Bottom Left
Top Half
Bottom Half
Top Left Top Right
Bottom Left Bottom Right

How To

1. Add HTML

<div class="dvCont">
  <table style="width:100%;height:100%;">
      <td style="width:50%;text-align:center">Top Left</td>
      <td style="width:50%;text-align:center">Top Right</td>
      <td style="width:50%;text-align:center">Bottom Left</td>
      <td style="width:50%;text-align:center">Bottom Right</td>
  <div class="dvInsideTL">

2. Add CSS

  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-color: #ccc;

  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
Author of this article:
Mahmoud Kessi, CPA, CGA
(204) 226-9576

Comments & Questions

Hi, how did you make the inside div transparent?


Hello, By using opacity property.


Add New Comment or Question



Email Link

Link to be shared:



Copyright © 2016-2019 KESSITEK.