Position grid behind other items
Hey, so this might be a little more difficult, that is why I came here to ask this, because I have no clue how I would achieve it properly.
Following demo: https://jsfiddle.net/3d15u4hp/35/
As you can see, I have a container which is a grid and is set to make twelve columns.
Now, I have over twelve items in that container.
First, there are the grid columns. These are just cells that should be displayed with blue outline.
And second, you can see that there are some items (with text).
What I now want to achieve is that these blue grid cells are visibly behind the text items, and the grid columns should still work properly for both of them.
So it should look something like the attached image.
You might wonder why I would want to do this, and the reason that I cannot do it with pure CSS here is that each of these grid columns there marks a drop zone. (I will use the JS drag and drop api to create some nice builder)
Following demo: https://jsfiddle.net/3d15u4hp/35/
As you can see, I have a container which is a grid and is set to make twelve columns.
Now, I have over twelve items in that container.
First, there are the grid columns. These are just cells that should be displayed with blue outline.
And second, you can see that there are some items (with text).
What I now want to achieve is that these blue grid cells are visibly behind the text items, and the grid columns should still work properly for both of them.
So it should look something like the attached image.
You might wonder why I would want to do this, and the reason that I cannot do it with pure CSS here is that each of these grid columns there marks a drop zone. (I will use the JS drag and drop api to create some nice builder)
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
