web-dev-qa-db-ja.com

位置：上/左/下/右を設定せずに絶対？

ケース＃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で動作し、Firefox0.8などでは動作しません。

それは良い解決策だと思いますか、それともすぐに崩壊する可能性のある非標準的なハックですか？

csscss-position
24
biziclop

標準では、通常、上/下、左/右が自動である場合、デフォルトで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

42
biziclop

AFAIK、階層的なcssルールに注意する必要があります。これは、top、left、およびその他の属性を指定しない場合、それらは親要素から継承されるか、ブラウザのcssでデフォルトで設定されるためです。私見ですが、要素を自分の値で初期化することをお勧めします。

2
Johnny_D