Erlaube Inhalt mehrspaltigen Layout zu überlappen

Question

Ich versuche zu Inhalt mehrere Spalten zu überlappen, die Grenzen ignorieren, die durch die mehrspaltigen Layout-Eigenschaften festgelegt sind.

Das Problem besteht darin, dass unabhängig von position, overflow oder z-index, werden die Spalten niemals zulassen, Inhalte von einer vorherigen Spalte zu überlappen, und werden die Inhalte abgeschnitten - als ob Überlauf zu hidden eingestellt ist.

Ist es möglich, dieses Verhalten zu überschreiben? Bewegen Sie die Maus über die Elemente im Snippet, um ein Beispiel für dieses Verhalten zu sehen.

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

Da Sie :after verwenden Sie nur position:fixed verwenden können, positionieren die :after wird einfach an der richtigen Stelle, um mein Verständnis! Damit das Bild relativ zum Ansichtsfenster positioniert wird, müssen Sie auch Anpassungen wie width:auto vornehmen, da width:100% die Breite des Bildschirms einnimmt und z-index:3000 ebenfalls benötigt wird, um den Text über den divs anzuzeigen.

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>