5

Alistapartで CSS Positions の記事を読んでいます。以下のスニペットが私の注意を引き、背後にある理論を理解できませんでした。

以下の html/css は、2 つのボックスを重ねて表示しています。しかし、#box_1 の位置を絶対位置に変更すると、#box_2 が #box_1 と重なってしまいます。

<!DOCTYPE html >
<html lang="en">
<head>
    <style>
        #box_1 { 
            position: relative;
            width: 200px;
            height: 200px;
            background: #ee3e64;
        }
        #box_2 { 
            position: absolute;
            width: 200px;
            height: 200px;
            background: #44accf;
        }
    </style>
</head>
<body>
    <div id="box_1"></div>
    <div id="box_2"></div>
</body>
</html>

  1. 別のボックス (box_1) の位置は、異なる/兄弟の div (box_2) の位置にどのように影響しますか。「絶対」は常に直接の非静的親に対してのみ絶対でなければなりませんか?

  2. 上記のcss（box_1に「position：relative;」を含む）で、「top：0;」を追加すると #box_2 にすると、box_2 が再び重なって表示されます。なぜこれが起こるのですか？

4

2 に答える 2

4

絶対位置にある要素は、その祖先が配置されているかどうかに関係なくtop、、、、またはプロパティを指定しない場合、静的な位置に留まります。そのため、単に設定しただけでは何も起こらないように見えます。代わりに、を指定しなかった場合と同じように影響を受けます。rightbottomleft#box_2position: absolute#box_1position: absolute

ただし、これは1が2に先行するためにのみ#box_1影響することに注意してください。#box_2絶対に配置#box_2すると、フローから取り出され、それに続く兄弟は、あたかも#box_2そこに存在しなくなったかのように流れます。と同一のを作成し、その後に追加するこの例を参照してください。通常のフローでは3は2を認識しないため、重複しています。1つしか表示されません。#box_3#box_1 #box_2#box_3#box_2

に設定top: 0する#box_2と、ビューポートの上部にアタッチする必要があることがわかります（祖先が配置されていないため、ブロックを含むため）。

于 2013-02-12T08:37:18.383 に答える
0

div 上の CSS の位​​置は、兄弟分割の位置には影響しませんが、子要素には影響します。例えば：

HTML:

  <div id="parent_1">
     <div id="child_1"></div>
     <div id="child_2"></div>
  </div>

CSS:

  #parent_1{ 
        position: relative;
        width: 400px;
        height: 400px;
        background: gray;
    }
 #child_1 {
    position: absolute;
    left:20px;
    top:20px;
    width:40px; 
    background:yellow;
 }
#child_2 {
    position: absolute;
    right:20px;
    top:20px;
    width:40px; 
    background:blue;
 }

#parent_1はボックス 400*400 を作成し、#child_1は親 div 内に配置され、左から 20 ピクセル、上から 20 ピクセルに配置されます。

于 2013-02-12T08:53:10.767 に答える