位置：绝对没有设置上/左/下/右？

Question

案例#1：

我想在默认 WordPress 主题 (http://twentyelevendemo.wordpress.com/) 的标题中的照片上方放置一个徽标

我的解决方案：在照片前添加标志，并在其上设置position: absolute，无需设置任何top/left/bottom/right属性：

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 */
}

案例#2：

另一个例子是一个水平的多级菜单，它是 100% 宽并用display: table-* 布局，但table-cells 不支持position: relative，所以我唯一的解决方案是：http://jsfiddle.net/pCe49/

它适用于 IE6-7、Firefox1.5，不适用于 Firefox 0.8 等。

您认为这是一个好的解决方案，还是一种非标准的 hack，随时可能崩溃？

Answer 1

AFAIK，你应该注意分层css规则，因为如果你不指定top，left和其他属性，它们是从父元素继承的，或者在浏览器的css中默认设置。恕我直言，最好用您的值初始化元素。

Answer 2

标准通常说如果上/下、左/右是自动的，则默认它们为position: static 值：

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height