biziclop biziclop - 2 months ago 5
CSS Question

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

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?

Answer

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

Comments