CSS3 column lock overlays overlapping overlays

Question

I am using multi-column layout using css3 column-count and column-gap options. Many divs are arranged in 2 columns inside the main div. The problem is that I want to use the dropdown menus in the inner divs that overlap their borders.

Problem: the css3 columns option blocks drop-down lists, overriding their parent div in Google Chrome. Tried changing z-index and overflow parameters. Any ideas? Thanks!

Plunker: http://plnkr.co/edit/8CqzQkvP9emIWvSXBses?p=preview

Edit: It seems that chrome handles css3 columns, which are generally quite buggy. I see a few more problems, for example, as soon as I put the bootstrap of glyphics on the buttons. Often, two clicks are required to open a drop-down list. Firefox also distributes divs much more evenly among columns. Did not find anything about these problems.?

Answer 1

Firstly, z-index do nothing on a nested element compared to its parents. Since you are trying to overlap a column, there is no element in the DOM so that it actually overlaps. Columns are not for layout. Instead, they are designed to create readable long text in horizontal layouts.

What you see in Chrome comes directly from the W3C spec for multi-column layouts and how they should handle overflow . The overflow setting for something here does not apply to columns, only to the column container.

If you want to execute the layout that you are here, I would strongly recommend that you look into the grid, such as the 960 Grid or Bootstrap Grid System .