32

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?

Asim K T
  • 16,864
  • 10
  • 77
  • 99
biziclop
  • 14,466
  • 3
  • 49
  • 65
  • 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! – LeZuse May 14 '15 at 01:21

2 Answers2

51

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

biziclop
  • 14,466
  • 3
  • 49
  • 65
3

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.

Johnny_D
  • 4,592
  • 3
  • 33
  • 63
  • In this case I would set `top/left/etc` to `auto !important` if necessary. – biziclop Apr 20 '12 at 10:03
  • Hm, but what' the goal of it? – Johnny_D Apr 20 '12 at 10:07
  • I added another use case into the answer, I "invented" this solution there. – biziclop Apr 20 '12 at 10:20
  • 1
    Still no idea of what you wanted to do. – Johnny_D Apr 20 '12 at 10:31
  • 1
    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. – biziclop Apr 20 '12 at 10:34
  • 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. – Johnny_D Apr 20 '12 at 10:49
  • 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. – biziclop Apr 20 '12 at 10:53
  • 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 http://jsfiddle.net/D292c/ to make it resizable. – Johnny_D Apr 20 '12 at 10:59
  • 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. – Johnny_D Mar 25 '19 at 22:53
  • 2
    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 – Rico Ocepek Feb 05 '20 at 10:21
  • Yup, `left`/`top`/`bottom`/`right` are not inherited, see [an MDN page](https://developer.mozilla.org/en-us/docs/Web/CSS/left). – certainlyakey Jan 30 '21 at 11:37