0

私は単純なCSSとHTMLのWebサイトに取り組んでおり、いろいろ試してみています。

画像をdivの上に浮かせたいと思いました。そのようなもの：

    <div id="big_container">
        <img id="img1" src="images/fun.png"/>
        <div id="some_container"></div>
    </div>

そのためのCSSは次のとおりです。

#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}

#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}

#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}

これは、 divのimg上に配置する代わりに、最初に配置し、画像の後に、その下にdivを配置します。some_containersome_container

画像をdivの上に浮かせるにはどうすればよいですか？FirefoxとChromeはそれを正しく表示します。IE8はそうではありません。

編集

カイルセブンオークスによるrelativeと、私は削除してみました。leftただし、それでもdivの上に表示され、重複しません。

4

2 に答える 2

2

位置を使用できます：絶対; 必要なdiv上に表示するには：

#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}​

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/

編集

position: relative;これで親divに追加する必要があることを忘れました。

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/

于 2012-08-24T11:51:08.253 に答える
1

要素をフローティングしても、同じ親内の他の要素の上に配置されることはありません。また、比較的配置された要素で「左」のCSS値を使用しようとしました。「float」は比較的配置された要素で機能し、「left」は絶対位置および固定位置の要素で機能します。

これが、「some_container」の上に「img1」を配置するためのCSSです（マージン宣言の省略形を含みます）。「position：relative;」に注意してください 親「big_container」に適用されます。

#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }

ここで、IE8に問題がなかったことがわかります。他のブラウザはあなたに親切で、矛盾するCSS宣言を無視して、望ましい結果をもたらした可能性があります。IE8は、それほど洗練されていないため、CSSを文字通り補正および取得していなかった可能性があります。

于 2012-08-24T11:56:48.430 に答える