div内に絶対値を配置するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1137517

  •  16-09-2019
  •  | 
  •  

質問

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

image

黒 (#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>
役に立ちましたか？

解決

含むdiv要素は、パディングを除くすべてのコンテンツを持っていないので、

絶対のdivは、文書の流れから取り出します。それを埋めるために高さを#box付けます。

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

他のヒント

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

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

#parent {
  position: relative;
}

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

#child {
  position: absolute;
}

見る： CSS の位​​置決めを 10 ステップで学ぶ

問題がこの記事に（他の中で）記載されている。

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

ページフローは、フロー内の要素の影響の他の要素の位置決めすることを意味します。

#boxは今DOMを見ていると、

つまり、.Aと.Bは、もはや「内部」#boxません。

この問題を解決するには、すべてが相対的、またはすべてを絶対にしたいでしょう。

一つの方法は以下のようになります：

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

#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>

（あなたが他の背後にあるものを見ることができますので、私は幅が異なる作ったことに注意してください。）

編集ジャスティンさんのコメントの後：次に、あなたの唯一のオプションは#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">

それが正しく動作する前に。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top