28

ケース #1:

デフォルトの WordPress テーマ ( http://twenyelevendemo.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サポートしていないためposition: relative、私の唯一の解決策は次のとおりです。

IE6-7、Firefox1.5 では動作するが、Firefox 0.8 では動作しない、など。

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

4

2 に答える 2

49

標準では、一般に、上/下、左/右が自動の場合、デフォルトでそれらの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

于 2012-04-20T11:02:22.880 に答える
3

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

于 2012-04-20T10:00:54.333 に答える