Question

我需要在HTML / CSS / Javascript中将一个div叠加到另一个div上。

我发现这个样本http://jsbin.com/kociyefoba/edit?html,css,output可以正常使用＃34;相当＆＃34;我非常喜欢，但当我试图在像我这样的情况下翻译它时（我在桌子里使用div ......），我有一些麻烦。

我试图制作一个示例代码：在这里你是......

＆＃13;

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

＆＃13;

如果您使用

position:absolute

代码中的

一切正常，但请注意，您无法看到表格边框....我已经看到了它们！

我已尝试将所有其他选项值用于排名，但它们不起作用....

建议/示例/替代方案？

Answer 1

这是一种做法。

＆＃13;

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

＆＃13;

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

＆＃13;

如何将一个div叠加到另一个div上（没有位置绝对...）？

1 个答案: