web-dev-qa-db-ja.com

div内に絶対位置を設定する方法は？

一連の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>
csspositioning
32
Justine

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

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}
31
Emily
  1. 最初に、すべてのブロックレベル要素が「ドキュメント」に対して静的に配置されます。すべての要素のデフォルトの配置はposition: staticです。これは、要素が配置されず、ドキュメント内の通常の場所に配置されることを意味します。通常、以前に設定された位置をオーバーライドする必要がない限り、これを指定しません。
  2. 相対位置：position: relativeを指定すると、上または下、および左または右を使用して、ドキュメント内で通常発生する場所に対して要素を移動できます。
  3. position: absoluteを指定すると、要素はドキュメントから削除され、指定した場所に正確に配置されます。

あなたの質問に関しては、包含ブロックを相対的な位置に置く必要があります、すなわち：

#parent {
  position: relative;
}

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

#child {
  position: absolute;
}

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

39
Jimmy Obonyo Abor

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

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

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

つまり、#boxはdomを見るようになりました。aと.bは「内部」ではなくなりました#box。

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

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

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

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

それが適切に機能する前に。

7
RichieHindle