如何疊加一個div在另一個div（絕對沒有位置...）？

我需要覆蓋HTML/CSS/Javascript中的另一個div一個div。如何疊加一個div在另一個div（絕對沒有位置...）？

我發現這個樣本http://jsbin.com/kociyefoba/edit?html,css,output，「我很喜歡」，但是當我嘗試在像我這樣的情況下翻譯它（我必須在桌子裏面使用div ...）時，我有一些麻煩。

我試圖產生一種示例代碼：在這裏你...

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

如果你在代碼中使用

position:absolute

一切工作正常但請注意，您無法看到表格邊框....我必須看到它們！

我試着使用所有位置的其他選項值，但他們不工作....

建議/例子/替代品？

來源

2017-05-26 Cesare

刪除內嵌樣式從覆蓋 – karthick

我試過，但它不工作... – Cesare

這是第一次然後添加樣式＃overlay1 – karthick

這是做到這一點的一種方式。

#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>

來源

2017-05-26 22:25:43 karthick

如何疊加一個div在另一個div（絕對沒有位置...）？

回答

相關問題