我正在使用 css3 column-count 和 column-gap 选项实现多列布局。大量的 div 在主 div 中排列成两列。问题是我想在与边界重叠的内部 div 中使用下拉菜单。
问题:在 Google Chrome 中，css3 列选项阻止下拉菜单与父 div 重叠。尝试更改 z-index 和溢出选项。有什么想法吗？谢谢!
笨蛋:http://plnkr.co/edit/8CqzQkvP9emIWvSXBses?p=preview
编辑:似乎 chrome 在处理 css3 列时通常有很多错误。例如，当我将 bootstrap glyphicons 放入按钮时，我看到了更多问题。通常需要点击两次才能打开下拉菜单。 Firefox 也在各列之间更均匀地分配 div。没有找到关于这些问题的任何信息..？
最佳答案
首先，与父元素相比，z-index 不会对嵌套元素执行任何操作。由于您试图重叠一列，因此 DOM 中没有元素可以实际重叠。列不是专门用于布局的。相反，它们旨在在水平布局上创建可读的长文本。
您在 Chrome 中看到的内容直接来自 W3C specification for multi-column layouts and how they should handle overflow .在此处设置溢出与列无关，仅与列的容器有关。
如果您想在这里完成您想要的布局，我强烈建议您查看网格系统，例如 960 Grid或 Bootstrap's grid system .
关于CSS3 列计数 block 重叠覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18560293/