I know that we can’t currently calculate “bottom-30px” as a background position with css3, however, that’s exactly what I need to do.
I need to accommodate an absolutely positioned nav menu which sits at the bottom of the element which has the background image.
Since the menu is 30 pixels tall, I’d like to place css on the nav menu which effectively adjusts the parent container’s margin up 30 pixels so that the background image appears to begin just at the top of the nav menu.
As it is, the nav menu is overlaying the bottom 30 pixels of the background image.
Yep, that’d work too. Unless the menu is not present or hidden by choice of the user.
I run into this issue often with css. I want the presence of one piece of content to influence the other, however, I had to take it out of the flow in order to get it positioned at the bottom of its parent container. Once I did that, I lost the influence it could have on its siblings.
It all depends on the exact dynamics but sometimes you can simply start the element after the container and drag it upwards so that it appears at the bottom of the element above. However, you always end up with a space that needs to be controlled explicitly so preserving space with padding and then dropping an absolute element into that space is much the same.
One of my wishes for CSS was a float:bottom but as yet I have only accomplished that for Firefox.