1つのdivを別のdivにオーバーレイする方法（絶対位置なし...）？

1つのdivをHTML/CSS/Javascriptの別のdivにオーバーレイする必要があります。1つのdivを別のdivにオーバーレイする方法（絶対位置なし...）？

このサンプルはhttp://jsbin.com/kociyefoba/edit?html,css,outputですが、私が好きなように "かなり" exaclyで動作しますが、私のような状況で翻訳しようとすると（テーブル内で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

これはこれを行う1つの方法です。最初である

#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

1つのdivを別のdivにオーバーレイする方法（絶対位置なし...）？

答えて

関連する問題