position: absolute without setting top/left/bottom/right?
css, css-position
Solution
The standard generally says if top/bottom, left/right are auto, then default them to their `position: static` values:
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
Problem
Case #1: I want to put a logo above the photo in the header in the default WordPress theme ( http://twentyelevendemo.wordpress.com/ ) My solution: add the logo before the photo, and set `position: absolute` on it, without setting any of the `top/left/bottom/right` properties: http://jsfiddle.net/TsAJp/ Html: ``` <a id="header"> <img id="logo"> <img id="photo"> </a> ``` Css: ``` #logo { position: absolute; margin: 10px; /* or padding: 10px; */ /* or border: 10px solid transparent; only this works with my elderly iPhone Simulator.app */ } ``` Case #2: Another example is a horizontal multi-level menu which is 100% wide and laid out with `display: table-*`, but `table-cell`s don't support `position: relative`, so my only solution was this: http://jsfiddle.net/pCe49/ It works on IE6-7, Firefox1.5, not working on Firefox 0.8, etc. Do you think it is a good solution, or is it a non-standard piece of hack, which can fall apart any minute?