kessi-cpa Library logo (4.0 KB)

How to position a div on top of another div

Concept

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 = ?

Answer
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

Example

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%;">
    <tr>
      <td style="width:50%;text-align:center">Top Left</td>
      <td style="width:50%;text-align:center">Top Right</td>
    </tr>
    <tr>
      <td style="width:50%;text-align:center">Bottom Left</td>
      <td style="width:50%;text-align:center">Bottom Right</td>
    </tr>
  </table>
  <div class="dvInsideTL">
  </div>
</div>

2. Add CSS

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

.dvInsideTL
{
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
}
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Hi, how did you make the inside div transparent?

Reply

Hello, By using opacity property.

8
7

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.