Useful frontend tidbits

Some obscure-ish bits worth remembering while trying to navigate my way through this frontend mess (I wanted to stay a backend engineer…), dumped here for my records.

Ran into some issues with “clear: both” in one column affecting divs in the other, pretty early on. Remember:

When you clear a float you clear all floats above it in the html. That includes any floated columns you may have. (via pmob.co.uk)

Unless: The clear property is applied to an element inside a float itself. In these cases the clear will be restricted to the current parent float.

Or: The parent element has overflow defined other than visible (e.g. overflow:auto or overflow:scroll). In these cases the clear will also be contained within that parent.

Another issue - had a div full of tiles, each “float: left”ed to create a grid of tiles. I wanted an overlay to extend out of the bottom of each tile on mouse over, and kept seeing the overlay covered up by the tile in the next row.

If you have 2 elements A & B and element A has a z-index of 2 and B has a z-index of 102 then whenever the elements overlap, B will always be in front of A.

However, if you nest another element C inside element A (which has a z-index of 2) and give element C a z-index of say 500, you may think that element C will remain on top. This is not the case - element B will remain on top because it has a higher z-index than element A. Element C is a child of element A and all its children can never be higher than the status of its parent.

Everything inside element A will always be behind element B as they are placed on the z-axis as a group. (You can of course adjust the order of elements within element A in relation to each other.) (via webmasterworld.com, circa 2003 - wow)

And to think, when I was looking for a job at a 2-5 person startup, I explicitly asked for no frontend work. Le sigh.

Let me know what you think on Twitter.