44

一連のdivを別のdiv内に配置する際に奇妙な問題が発生しています。画像で説明するのが最善だと思います。

画像

黒（#box）divの中には、同じ場所に配置する必要のある2つのdiv（.a、.b）があります。私が達成しようとしているのは最初の画像に描かれており、2番目の画像は私が得た効果です。divがクリアなどなしでフロートされたように見えますが、明らかにそうではありません。どんなアイデアでも大歓迎です！

このサンプルのコードは次のとおりです。

CSS：

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML：

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>
4

4 に答える 4

57
  1. まず、すべてのブロックレベルの要素が「ドキュメント」に対して静的に配置されます。すべての要素のデフォルトの配置はですposition: static。これは、要素が配置されておらず、ドキュメント内の通常の場所に配置されることを意味します。通常、以前に設定された位置を上書きする必要がない限り、これを指定することはありません。
  2. 相対位置：を指定するposition: relativeと、上または下、および左または右を使用して、ドキュメント内で通常発生する場所を基準にして要素を移動できます。
  3. を指定するposition: absoluteと、要素はドキュメントから削除され、移動するように指示した場所に正確に配置されます。

したがって、質問に関しては、包含ブロックを相対的な位置に配置する必要があります。

#parent {
  position: relative;
}

そして、次のように親要素に対して絶対的に配置する必要がある子要素：

#child {
  position: absolute;
}

参照：10ステップでCSSポジショニングを学ぶ

于 2012-09-11T08:45:40.753 に答える
37

絶対divはドキュメントのフローから取り出されるため、含まれているdivにはパディング以外のコンテンツは含まれません。#boxに記入する高さを指定します。

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}
于 2009-07-16T13:29:27.950 に答える
8

の1つである#aか、そうで#bない必要があるため、それに対応するために成長します。position:absolute#box

したがって、次のように、その上に配置するのをやめ#a、その上にposition:absolute配置することができます。#b

 #box {
        background-color: #000;
        position: relative;     
        padding: 10px;
        width: 220px;
    }
    
    .a {
        width: 210px;
        background-color: #fff;
        padding: 5px;
    }
    
    .b {
        width: 100px; /* So you can see the other one */
        position: absolute;
        top: 10px; left: 10px;
        background-color: red;
        padding: 5px;
    }
    
    #after {
        background-color: yellow;
        padding: 10px;
        width: 220px;
    }
    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>
    <div id="after">Hello world</div>

（幅を変えたので、前後が見えることに注意してください。）

Justineのコメントの後で編集：次に、唯一のオプションは#boxの高さを指定することです。これ：

#box {
    /* ... */
    height: 30px;
}

aとbの高さが固定されていると仮定すると、完全に機能します。HTMLの先頭にDoctypeを追加して、IEを標準モードにする必要があることに注意してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

その前に正しく動作します。

于 2009-07-16T13:30:50.680 に答える
7

この問題は（とりわけ）この記事で説明されています。

#boxは比較的配置されているため、ページの「フロー」の一部になります。他のdivは絶対に配置されているため、ページの「フロー」から削除されます。

ページフローとは、要素の配置がフロー内の他の要素に影響を与えることを意味します。

言い換えれば、#box今見られるように、.aと.bはもはや「内部」ではありません#box。

これを修正するには、すべてを相対的、またはすべてを絶対的にする必要があります。

1つの方法は次のとおりです。

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}
于 2009-07-16T13:23:36.070 に答える