相対divを作成する方法他の相対divをすべてのdivコンテナ内でカバーする方法

Question

他の相対divをどのようにカバーするかわからないのは、間違っていると本能的に感じるwidth:-100px;のようなものを使わずにそれを実行するための別の手段がありますか？

<div style="position:relative;"> 
    <div id="over_div" style="position:relative"></div> 
    <div id="down_div" style="position:relative"></div> 
    <div id="down_div" style="position:relative"></div> 

</div> 

EDIT：
私はない右がなく、低何とかそれを追加している、私はjQueryの経由カバーのdivを追加することを追加していことを言及する必要があり、それゆえ私は理由を理解していないので、私はそれが間違っているかもしれないと思いましたhtml構造

Answer 1

私はあなたが右に理解していれば。このようなもの？場合

<div class="wrapme"> 
 
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div> 
 
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div> 
 
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div> 
 
</div>

Answer 2

あなたは#over_divに絶対的な位置を与えることができます。もう1つの注意点は、スタイルをより簡単に維持できるように、外部CSSシートを使用することをお勧めします。

#over_div{ 
    position:absolute; 
    background-color: Rgba(25,25,25,0.5); 
    z-index:10; 
    height:150px; 
    width:50px; 
} 
#down_div{ 
    position:relative; 
    background-color: red; 
    height:50px; 
    width:50px; 
} 
#down_div2{ 
    position:relative; 
    height:50px; 
    width:50px; 
} 

<div style="position:relative;"> 
    <div id="over_div"></div> 
    <div id="down_div"></div> 
    <div id="down_div2"></div> 
</div> 

Answer 3

Iは、スニペットコードを参照してください、あなたの要求を理解していました。

wrap.onclick = function(){ 
 
    this.insertAdjacentHTML('beforeend', '<div id="app">appended</div>'); 
 
    app.style.top = -app.offsetTop+"px"; 
 
    this.onclick = null; 
 
}

div {border: solid 1px gray;height:10%; width:10%;} 
 
#wrap { height:180px; width:320px; } 
 
#app { position: relative; height: 100%; width:100%; background-color: rgba(200,200,200,.7)}

<div id="wrap" style="position:relative;"> 
 
    <div id="over_div" style="position:relative">1st</div> 
 
    <div id="down_div" style="position:relative">2nd</div> 
 
    <div id="down_div" style="position:relative">3rd</div> 
 
    click anywhere to append the cover div 
 
</div>