グリッドに配置されたdiv内の絶対配置

Question

CSSグリッドレイアウトを試していて、現在問題が発生しています。グリッドに配置されたdivの子にposition: absoluteを使用したいと思います。下記（コードスニペット）に示すように、赤いボックスはposition: absoluteで設定され、子は.leftです。

赤いボックスは視覚的にオレンジ色のdiv（左側）に残り、茶色のdiv（右側）では「オーバーフロー」しないようにするにはどうすればよいですか？

私は結果なしでposition: relativeを親要素に設定しようとしました。以下は

次が問題のGIFです

html, 
 
body, 
 
section { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.window { 
 
    display: grid; 
 
    grid-template-areas: "first seperator last"; 
 
    grid-template-columns: 100px 10px auto; 
 
    /*      | this one  */ 
 
} 
 

 
.left { 
 
    background: #ff9e2c; 
 
    grid-area: first; 
 
    position: relative; 
 
} 
 

 
.right { 
 
    background: #b6701e; 
 
    grid-area: last; 
 
} 
 

 
.separator { 
 
    background: white; 
 
} 
 

 
.abs-pos { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 75px; 
 
}

<section class="window"> 
 
    <div class="left"> 
 
    <div class="abs-pos"></div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="right"></div> 
 
</section>

（あなたは、セパレータの動きを見るために値を変更することができます）問題を示す簡略版である： PS：実際のファイルでは、.separator divを水平に動かして2つのdivのサイズを変更できるJSスクリプトがあります。.leftと.rightです。基本的にプロパティgrid-template-columns: 100px 10px autoを.windowに変更し、グリッドのサイズを変更します。

Answer 1

.leftペインのoverflow: hidden;を設定すると、赤い枠が親の境界の外側に表示されなくなります。

html, 
 
body, 
 
section { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.window { 
 
    display: grid; 
 
    grid-template-areas: "first seperator last"; 
 
    grid-template-columns: 100px 10px auto; 
 
    /*      | this one  */ 
 
} 
 

 
.left { 
 
    background: #ff9e2c; 
 
    grid-area: first; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.right { 
 
    background: #b6701e; 
 
    grid-area: last; 
 
} 
 

 
.separator { 
 
    background: white; 
 
} 
 

 
.abs-pos { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 75px; 
 
}

<section class="window"> 
 
    <div class="left"> 
 
    <div class="abs-pos"></div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="right"></div> 
 
</section>

Answer 2

あなたのクラスを与えることをしようとしたことがありZインデックス

z-index: -1; 

Zインデックスは、スタック順序を設定して位置決め要素で動作します。絶対的、相対的、固定的です。

したがって、あなたが.rightおよび/または.seperatorクラスに相対的な位置を与えることができれば、動作するはずです。

.right { 
    position:relative; 
    z-index: 1; 
} 

.separator { 
    position:relative; 
    z-index: 1; 
} 

.abs-pos { 
    position:absolute; 
    z-index: -1; 
}