css - position: absolute without setting top/left/bottom/right?

Question

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-cells 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?

Answer 1

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

Answer 2

AFAIK, you should pay attention of hierarchical css rules, beacuse if you don't specify top, left and other attributes, they are inherited from parent element, or are set by defaults in browser's css. IMHO, it's better to initialize elements with your values.