如何將一個div覆蓋在另一個div上（沒有絕對位置…）？
[英]How to overlay one div over another div (no position absolute … )?
問題描述
我需要在HTML / CSS / Javascript中將一個div覆蓋在另一個div上。
我已經找到了此示例http://jsbin.com/kociyefoba/edit?html,css ，輸出可以完全“正常”運行，但是當我嘗試在類似我的情況下進行翻譯時（我已經在表內使用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
在代碼中一切正常，但請注意，您看不到表格邊框...。我必須看到它們！
我嘗試使用所有其他選項值作為位置，但是它們不起作用....
建議/示例/替代方案？
1 個解決方案
解決方案1
2 已采納 2017-05-26 22:25:43
這是一種方法。
#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>
無論滾動如何，如何將位置絕對 div 翻譯在另一個之上
[英]How to translate position absolute div on top of another regardless of scroll
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.