Q:

Get overlay to appear immediately below selected table row (without JS)

Before I start--I know we can do this with JS positioning. I'm trying to see if we can avoid the JS positioning.
You can see a close approximation here-- I've forced/dummied the overlay positioning using a top:nnn value for now (it's off a bit in the jsfiddle). 
What I want to do is set the top of that overlay to start in line with the bottom of the selected table row. Again-- we dummied it for now using top with a fixed value, but there should be a CSS way to set it? 
I did play around with tr.isSelected:after {...} type stuff, that didn't work as expected. 

A:

Try using tr.isSelected>td:first-child, and among the properties include position:absolute.
I'm not sure what the point is, though... Class toggling can only be done with JavaScript, so if you're already using JS then where's the harm in using it to calculate the position?

