0

さまざまな方法で使用することに違いがあるかどうか、特にメインターゲットがトッププロパティである場合、相対位置ラップの周りで使用するポイントは何ですか? どのような場合にそうすることが重要なのかなど、相対位置ラップの周りでそれを使用する主な目的は何ですか?

これは私が試していたもので、相対位置と静的位置の下で絶対位置を使用することに違いはありません。つまり、「トップ」プロパティに関してです。

<head>
<style>
 #box_1 { 
position: static;
width: 200px;
height: 100px;
background: yellow;
   }

 #box_2 { 
position: relative;
width: 700px;
height: 60px;
background: red; left:300px;
   }

 #box_3 { 
position: absolute;
width: 700px;
height: 60px;
background: black; left:200px; top: 300px;
  }
 #box_4 { 
position: absolute;
width: 700px;
height: 60px;
background: green; left:200px; top: 300px;
  }
</style>

</head>
<body>
<div id="box_1">
<div id="box_2">
<div id="box_3">
</div>
</div>
<div id="box_4">
</div>
</div>

</body>
4

2 に答える 2

1

absolute配置された要素を配置されたオブジェクトの周りにラップしない場合relatively、ビューポートでは上が上になりますが、ズームインまたはズームアウトすると、ビューポートの一番上になり、配置された場合の天気、レイアウトから独立しrelativelyますabsolute配置されたオブジェクトが相対的に配置されたオブジェクトにラップされている場合、配置されたオブジェクトの境界の下にrelatively配置されます。

例えば、

質問で述べたように、id 、、およびの 3 つのdivタグを考えてみましょうbox_1box_2box_3

以下の 3 つの CSS と HTML を仮定します。div's

CSS:

#box_1 { 
position: static;
width: 200px;
height: 100px;
background: yellow;
    top:0px; left:0px;
   }

 #box_2 { 
position: relative;
width: 1000px;
height: 100px;
background: red;
   }

 #box_3 { 
position: absolute;
width: 200px;
height: 100px;
background: black; right:0px; top: 0px;
  }

HTML:

<div id="box_2">
    <div id="box_1"></div>
    <div id="box_3"></div>
</div>

box_2上記の例から、相対的に配置された div が親として取得され、それぞれ絶対位置と静的位置としてラップさbox_1れていることがわかります。box_3何が起こるかというと、相対的に配置された div が絶対および静的に配置された div をラップすると、内側の子が親 div をラップして、親に対する相対的な位置を生成します。

ワーキングデモ

以下のようにHTMLを変更すると、

<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>

現在のように、すべての div は独立しており、それ自体が親であるため、すべての div がそれぞれの特性に従って動作するようになります。たとえば、絶対配置された div はその原点、つまりビューポートに依存せず、最初のシナリオのように相対的に配置された div の境界に従ってではなく、原点に関係なく左、右、上、下に移動します。特性に従って動作する静的および相対 div についても同じことが言えます。

ワーキングデモ

これが役立つことを願っています。

于 2013-08-13T10:44:00.433 に答える