允許內容重疊多列布局

Question

我試圖讓內容重疊多個列，而忽略了由多列布局屬性設置的邊界。

問題在於，無論position ， overflow或z-index ，這些列都將永遠不允許前一列的內容重疊，並且會切斷內容-就像將overflow設置為hidden 。

是否有可能忽略此行為？ 將鼠標懸停在摘要中的元素上，以查看此行為的示例。

 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

因為您正在使用:after您只可以使用position:fixed ，所以:after將按照我的理解將其簡單地定位在正確的位置！ 為了使圖像相對於視口定位，還需要進行諸如width:auto類的調整，因為width:100%將占用屏幕的寬度，並且還需要z-index:3000才能在div上方顯示文本。

 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>