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?

Fujimoto

Thanks for the fiddle! I was trying to use this solution myself in combination with line-height set on the parent which pushed the submenu too far. Subtracting the line-height and adding padding helped, yay! – Platt

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

Fujimoto

Updated doc for CSS3: w3.org/TR/css-position-3/#abs-non-replaced-width – Weathercock

is this behavior also the same for position: fixed as well? – Ethelred

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.

Lewison

In this case I would set top/left/etc to auto !important if necessary. – Fujimoto

Hm, but what' the goal of it? – Lewison

I added another use case into the answer, I "invented" this solution there. – Fujimoto

Still no idea of what you wanted to do. – Lewison

In the horizontal menu example, I simply couldn't find any other solution than this hack to properly position the submenus, but I don't know how safe it is. – Fujimoto

Oh, I see. But once window is resized you get different width for elements. I'd recommend to use horizontal list for menu, divs for li items, and inside that divs use submenus, to position them correct and width proper width. – Lewison

Normally I would have done what you described, but this menu structure was generated by WordPress, already styled by a purchased theme, and I didn't want to entirely rework it just to avoid the "hackish" solution. – Fujimoto

In that case, yeap, that would be normal, cuz it's already workaround. once object is positioned relative, it takes position attributes from parent element, topmenu in your case. Once you know count of items in menu, you can set percentage width to submenu too jsfiddle.net/D292c to make it resizable. – Lewison

I believe it's fairly true up to date, but it is always better to double check it within your target browsers as they tend to change behavior from time to time. – Lewison

I know it's an old answer but just for reference: 1) top / right / bottom / left are not inherited from the parent 2) AFAIK no user agent has defaults for these props either -> Should be safe to just leave them out – Kucera

Yup, left/top/bottom/right are not inherited, see an MDN page. – Karleen