允许内容重叠多列布局答案

【问题标题】：Allow content to overlap multi-column layout允许内容重叠多列布局
【发布时间】：2017-10-03 15:09:22
【问题描述】：

我试图让内容重叠多列，忽略多列布局属性设置的边界。

问题在于，无论position、overflow 还是z-index，列都不会允许前一列中的内容重叠并且会截断内容——就好像溢出设置为hidden。

是否可以覆盖此行为？将鼠标悬停在 sn-p 中的元素上以查看此行为的示例。

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>

【问题讨论】：

我认为没有办法覆盖该行为，即使有，这似乎也不是正确的方法。你能解释一下你最终想要达到的目标吗？也许有一种完全不同的更好的方式来实现你的目标。

标签： html css multiple-columns css-multicolumn-layout

【解决方案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>

【讨论】：