相対絶対親divの外側に表示される絶対絶対子divのCSS

Question

私は以下のhtml構造を持っています。私は "コンテナ" divの上に "緑色の"色の絶対divを表示したいと思います。以下は

<h4> 
 
    CSS Position Issue 
 
</h4> 
 
<div id="container" style="overflow: auto;height:55px;width:200px;border:3px solid blue;position:relative"> 
 
    <ul> 
 
    <li> 
 
     <div style=";border:1px solid blue;"> 
 
     <div style="height: 100px; width: 100px; background: red;"> 
 
      if there is some really long content here, it will cause overflow, but the green box will not 
 
      <div style="position:absolute; z-index:-1; left: 60px; top:0; height: 220px; width: 120px; background: green;"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

本の出力です。

Iは、（親のdivの内側にある）親「コンテナ」DIVの外側に表示される緑色の着色絶対DIVを表示したいと思います。

以下は、望ましい出力スクリーンショットです。

ノースクリプトでは、すべての純粋なCSSのソリューションを探しています。

Answer 1

あなたの正確な問題は何かを得ることができませんが、より明確になります。しかし、まだあなたはこれを試すことができます。

<h4>CSS Position Issue</h4> 
 
    <div id ="container" style="overflow: auto; height: 55px; width: 200px; border: 3px solid blue;position:relative"> 
 
     <ul> 
 
      <li> 
 
       <div style="border: 1px solid blue;"> 
 
        <div style="height: 100px; width: 100px; background: red;"> 
 
         if there is some really long content here, it will cause overflow, but the green box will not 
 
         <div style="position:absolute; z-index:-1; left: 0px; top:0; height: 220px; width: 120px; background: green;"> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div>

これはあなたを助けることを願っています。

Answer 2

#containerからinitialの設定をoverflowに設定すると、問題が解決する可能性があります。参照のためにスニペットを下にチェックしてください。

#container { 
 
    overflow: ; 
 
    height: 55px; 
 
    width: 200px; 
 
    border: 3px solid blue; 
 
    position: relative 
 
} 
 

 
.border { 
 
    border: 1px solid blue; 
 
} 
 

 
.parent { 
 
    height: auto; 
 
    width: 100px; 
 
    background: red; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 60px; 
 
    top: 0; 
 
    height: 220px; 
 
    width: 200px; 
 
    background: green; 
 
}

<h4> 
 
    CSS Position Issue 
 
</h4> 
 
<div id="container"> 
 
    <ul> 
 
    <li> 
 
     <div class="border"> 
 
     <div class="parent"> 
 
      if there is some really long content here, it will cause overflow, but the green box will not 
 
      <div class="child"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>