2

長い検索の後、この問題への参照がどこにも見つからなかったようです。これはおそらく、基本的な概念が欠けていることを意味しますが、とにかく質問を続けます。float:left <div>背景画像をオーバーレイしようとしています。問題の単純化されたバージョンを以下に示します (迅速な再現性のために画像を表す div を使用)

<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
     BACKGROUND DIV
</div>
<div style='float: left; background-color: yellow; width: 100px; height: 100px'>
     FLOATING IMAGE
</div>

絶対に配置された div がフロートをオーバーレイしているようです。親のプロパティに頼らずにこれを整理するにはどうすればよいですかbackground-image(これはオプションではありません)。

4

2 に答える 2

1

位置の設定:相対; 浮動要素に z-index:1; を割り当てます。背景と z-index:2 に。浮遊画像に。

<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
 BACKGROUND DIV
</div>

<div style='position:relative; float: left; background-color: yellow; width: 100px; height: 100px; z-index:2;'>
 FLOATING IMAGE
</div>

編集：参照用のjsfiddleは次のとおりです：http://jsfiddle.net/exUm7/1/

于 2013-03-07T09:36:05.927 に答える
0

ゲームのようなことをしている場合を除いて、Div オーバーレイは良い考えではありません。オーバーレイなしと同じくらいレイアウトを計画すると、バッターだと思います。それはあなたを簡単にします。

ただし、これを行う必要がある場合。どうぞ

<div style='float:left; background-color:blue; width:500px; height:500px; z-index:1'>
BACKGROUND DIV
</div>
<div style='float:left; margin-left:-500px; background-color:yellow; width:100px; height:100px; z-index:2'>
FLOATING IMAGE
</div>
于 2013-03-07T09:45:56.660 に答える