0

状況は次のとおりです。

HTML:

<div id="main">
    <div id="a"></div>
    <div id="b">Some Text</div>
</div>

CSS:

#a{
    float:left;
    width:800px;
    height:150px;
    background-color:#CCC;
}

#b{
    width:1000px;
    height:100px;
    background-color:#9CC;
}

結果： ここに画像の説明を入力

テキストがdiv#a の後ろに入らないのはなぜですか? "Some Text" がdiv#aがまだ通常のフローにあるかのように動作するのはなぜですか? テキストを強制的に期待どおりに動作させる方法 (div#a の下に移動する) ?

更新: 下を意味するときは、Y ではなく Z 軸の下を意味します。div はこの位置に留まる必要があります。移動が必要な部分はテキストだけです。

4

7 に答える 7

1

これをチェックしてください：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

z-indexステートメントも役立つと思います

補遺

<style type="text/css">
<!-- 
#id {
position:relative;
}

#a{
/* float:left;  */
 position: absolute;
 top:0%;
 left0%;
width:800px;
height:150px;
background-color:#CCC;
    z-indez:1;
}

#b{
position: absolute;
 top:0%;
 left0%;
width:1000px;
height:100px;
background-color:#9CC;
    z-index:-1;
}

トリックを行います（chrome、ff、IE6で）id = ba負のzインデックスの信頼を与えるまで、それを機能させることができませんでした。

于 2012-09-21T13:50:14.313 に答える
1

http://www.w3.org/wiki/CSS/Properties/float

• left
この要素は、左にフロートするブロック ボックスを生成します。コンテンツは、上から順にボックスの右側に流れます。

の内容#bは正常に動作しています。その前のフロート要素の右側にフロートします。

したがって、「レイヤード」効果が必要な場合は、それを適切に提供する CSS 宣言を使用します。position

注：#aではなく、その親に配置したままにするには<body>：

#main { position:relative }
#a { position:absolute }
于 2012-09-21T13:50:41.843 に答える
1

1 つの要素をフロートさせると、次の要素は、その要素のための場所があり、それがブロック レベルの要素 (ネイティブまたは CSS によって設定されたもの) である場合、それに「接触」します。

要素が互いに「隣接しない」ようにしたい場合は、float を使用しないでください。互いに下に移動するには、ブロック レベルである必要があることに注意してください。

フロートは、たとえば行うように要素を「持ち上げる」position: absoluteことはありません。

于 2012-09-21T13:19:39.500 に答える
0

次のコードを追加します。

float:left;

#b スタイルへ

于 2012-09-21T13:10:23.100 に答える
0

浮動要素は、青色要素のような非浮動要素の左側に浮動します。フローティング要素の下に青い要素を強制するには、それに適用できますclear: left;。

于 2012-09-21T12:54:20.810 に答える
0

両方の div ID に float:left が割り当てられている場合、2 番目の div #b がそれに続き、#a の下に移動します。

于 2012-09-21T13:02:18.007 に答える
0

#a、#b 両方に表示ブロックを与える

于 2012-09-21T13:33:40.520 に答える