CODEWITHSUNDEEP
javascripthtmlcss
Cesare
Cesare

Reputation: 1749

How to overlay one div over another div (no position absolute ... )?

I need to overlay one div over another div in HTML / CSS / Javascript.

I've found this sample http://jsbin.com/kociyefoba/edit?html,css,output that works "quite" exacly as I'd like but when I try to translate it in a situation like mine (I've to use div inside a table ... ), I've some troubles.

I've tried to produce a sample code: here you're ... 

<html>
<head>
<meta charset=utf-8 />
<title>test div over another div</title>

</head>
<body>
  <table border=1>
   <tr>
    <td>
     <div id="base1" style="position:relative;width:100%;height:100%;top:0px;left:0px">
        <img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
     </div>
     <div id="overlay1" style="z-index:1;position:relative;width:100%;height:100%;top:50px;left:50px;color:red;">
        Text Overlay
     </div>
   </td>
 </tr>
</table>
</body>
</html>

If you use 

position:absolute

in the code all works fine but note that you can't see the table borders .... I've to see them!

I've tried to use all the other option values for position but they doesn't work ....

Suggestions / examples / alternatives?

Upvotes: 0

Views: 4963

Answers (1)

karthick
karthick

Reputation: 12176

This is one way of doing it.

#overlay1 {
    width: 100%;
    height: 100%;
    position: absolute;
    color: red;
    font-size: 40px;
    z-index: 1;
    top: 25px;
    left:75px;
}

#base1 {
    width: 100%;
    height: 100%;
    position: relative;
}
td {
  position: relative;
}
<table border=1>
   <tr>
    <td>
    <div id="overlay1">
        Text Overlay
     </div>
     <div id="base1">
        <img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
     </div>     
   </td>
 </tr>
</table>

Upvotes: 2

Related Questions