位置：绝对没有设置顶/左/底/右？ [英] position: absolute without setting top/left/bottom/right?

问题描述

我想在默认WordPress主题（ http://twentyelevendemo.wordpress.com/ ）

I want to put a logo above the photo in the header in the default WordPress theme ( http://twentyelevendemo.wordpress.com/ )

我的解决方案：在照片，并在其上设置 position：absolute ，不设置任何 top / left / bottom / right 属性：

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

情况＃2：

另一个例子是横向多级菜单，宽度为100％，并且用 display：table - code>，但 table-cell 不支持 position：relative ，所以我唯一的解决方案是this： http://jsfiddle.net/pCe49/

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/

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

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?

推荐答案

标准通常表示如果顶部/底部，左/ right are auto，then default them to their position：static values：

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

这篇关于位置：绝对没有设置顶/左/底/右？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！