位置：绝对没有设置顶部/左侧/底部/右侧？

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-cell s不支持position: relative，所以我唯一的解决方案就是这个：http://jsfiddle.net/pCe49/

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

你认为这是一个很好的解决方案，还是一个非标准的黑客攻击，它可以在任何时候崩溃？

Answer 1

标准通常表示如果顶部/底部，左/右是自动的，则默认为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

Answer 2

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