なぜ＆＃8220; display：table-cell＆＃8221; ＆＃8220; position：absolute＆＃8221;

StackOverflow https://stackoverflow.com/questions/1608983

  •  05-07-2019
  •  | 
  •  

質問

奇妙な問題に遭遇しました。 DIVをコンテナとして使用し、このDIVに画像を配置します。この画像を垂直に下に揃えたいです。次のコードが機能します。

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

ただし、CSSコード＆quot; position：relative＆quot;を変更すると、 「位置：絶対」にすると、画像を最下部に揃えることができなくなります。これはFirefox3のバグですか？この問題を解決するにはどうすればよいですか？

現在のソリューションは次のとおりです：

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

しかし、私はこの解決策が好きではありません。

役に立ちましたか？

解決

簡単な答え： 変更

top: 60px;

to 

bottom: 60px;

長答：

宣言 position：absolute は、要素をどこからでも取り出し、静的に宣言されていない最も内側の要素に相対的に配置します。 Inは他の要素の配置に関与しないため、table-cellとして機能しなくなります（宣言は無効になります）。さらに、 top：10px などの宣言は、その要素を含む要素の上部からの距離を大きくすることを意味します。

position：relative として要素を宣言すると、 top：10px などの宣言が「要素を現在の位置から上から10px移動」することを意味します。元の位置が他の要素の配置を決定することを覚えておく必要がありますが、他の要素とオーバーラップするように宣言された要素は可能です。

これがあなたの質問に答えることを願っています。

他のヒント

position：relative;を設定することもできます。コンテナ。バナー（#banner position：relative;およびimg position：absolute）を作成し、絶対位置をbottom：0に設定して、コンテナの下部に揃えます。ページ全体の場合、コンテナの幅と高さを100％に設定し、本文またはdivの余分なパディング/マージンを削除します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top