コンテンツを複数列のレイアウトに重ねることを許可する

Question

複数列のレイアウトプロパティで設定した境界を無視して、複数の列を重ねるようにコンテンツを許可しようとしています。オーバーフローがhiddenに設定されているかのように -

問題にかかわらずposition、overflow又はz-indexの、列は前の列からのコンテンツが重複することを可能にすることはありませんとコンテンツを遮断することです。

この動作を無効にすることはできますか？スニペット内の要素にカーソルを合わせると、この動作の例が表示されます。

body { 
 
    background-color: silver; 
 
} 
 

 
.container { 
 
    display: block; 
 
    width: 50%; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    column-gap: 1em; 
 
    -webkit-column-gap: 1em; 
 
    -moz-column-gap: 1em; 
 
} 
 

 
.container div { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 2em 0; 
 
    background: #2980b9; 
 
    color: white; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    margin-bottom: 1em; 
 
} 
 

 
.container div:hover:after { 
 
    content: 'I\'m overlapping!'; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: black; 
 
    background-color: white; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>

Answer 1

あなたはあなただけposition:fixedを使用することができます:afterを使用しているので、:afterは単に私の理解に、正しい場所に配置します！画像がビューポートに対して配置されるように調整する場合は、width:100%が画面の幅を占め、div25の上にテキストを表示するためにz-index:3000も必要となるため、調整する必要があります（width:auto）。

body { 
 
    background-color: silver; 
 
} 
 

 
.container { 
 
    display: block; 
 
    width: 50%; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    column-gap: 1em; 
 
    -webkit-column-gap: 1em; 
 
    -moz-column-gap: 1em; 
 
} 
 

 
.container div { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 2em 0; 
 
    background: #2980b9; 
 
    color: white; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    margin-bottom: 1em; 
 
} 
 

 
.container div:hover:after { 
 
    content: 'I\'m overlapping, like a lot!!'; 
 
    position: fixed; 
 
    width: auto; 
 
    color: black; 
 
    background-color: white; 
 
    z-index:3000; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>