postionを使用せずに画像をオーバーレイする方法：絶対？

position:absoluteを使用せずに別のdiv画像（背景画像ではありません）の上に画像のdivをオーバーレイする適切なCSSメソッドを探しています。誰でもこれを行う方法を知っていますか？postionを使用せずに画像をオーバーレイする方法：絶対？

出典

2011-09-13 Sean Lee

なぜ 'position：absolute'を使用できないのですか？ –

親の 'position：relative'と' position：absolute'を組み合わせることは、ページ全体のレイアウトを保存しながら2つのオブジェクトを重ね合わせる非常に良い方法です。これは、通常のHTMLボックスモデルでレイアウトできる自己完結型コンテナを作成しますが、コンテナ内ではオーバーラップを作成するために位置を使用します。 – jfriend00

あなたは本当になぜあなたがポジションを避けようとしているのかを説明する必要があります：絶対的です。なぜなら、それはおそらく最良の解決策であり、おそらくあなたが心配していることを解決する方法があるからです。 – jfriend00

position: absoluteは「不適切」ではありません。これはCSS仕様の一部です！ position: relative、またはfloatの属性を使用しない限り、要素を他の要素に重ねる方法はありません。

position: absoluteが最も簡単な方法です。何が悪い考えだと思いますか？ため、

div 
{ 
    background: url(/images/foo.png) no-repeat; 
}

しかし：background-image

<div> 
    <img src="..."> 
</div>

は次にDIV与える：

唯一の他の解決策は、このように、背景とDIV内の画像を使用することです私は間違いなくposition: absoluteに固執すると思います。

非常にグリッチデモhereの効果があります。

出典

2011-09-13 21:23:33 Bojangles

元の投稿に記載されているように、div内の背景を扱うことはできず、位置に同意できません：絶対は最も簡単ですが、レスポンシブデザインには理想的ではない –

http://jsfiddle.net/HUUQ6/2/

あなたは、負のマージンを使用して、互いの上に/重複要素をオーバーレイすることができます。例：

#b{ 
    margin-left:-10px; 
}

これの左側（：スパンのような、ブロック型の素子ではなく、インラインこれはディスプレイであると仮定して）であるどのような重ね、左10pxのに素子bを移動します。

出典

2011-09-13 21:32:29

時間の90％、負のマージンは悪い考えです。一部のブラウザにはバグがあり、元のオブジェクト用に予約されている「レイアウトされた領域」は変更されません。私はOPがアイデアを求められていることを知っていますが、マイナスマージンよりも 'position：absolute; 'を使うことをお勧めします。 – jfriend00

@ jfriend00私は同意しますが、「位置を使わないで：絶対」は質問の不可欠な部分です。 –

私はOPの利益のために応答していました。重複するオブジェクトの絶対配置よりも良い選択肢はないと思います。なぜ彼らが絶対的な位置づけを避けようとしているのかを説明すれば助けになるでしょう。彼らは、親に 'position：relative'を使う方法を理解していないと思う。 – jfriend00

postionを使用せずに画像をオーバーレイする方法：絶対？

答えて

関連する問題