4

私のサイトVault Xを参照してください

私は金庫室の横にある照明スイッチをクリック可能な機能にしようとしてきました。

ただし、divをこの位置に固定したままにすることはできません(ウィンドウサイズを調整すると、移動します)。

これを達成するための最良の方法は何ですか？

4

3 に答える 3

6

Doing position:absolute(より適切にはここでは) は、静的以外の位置を持つ最初の親 (この場合 (および常に) ブラウザーウィンドウ)position:fixedを基準にして、ドキュメントの通常の流れの外側にある要素の位置を指定します。position:fixed

このように、上と右の位置を指定したので、これらの値は固定されています。右の境界線を内側に移動すると、ブラウザーのビューポートからの距離は同じままでなければならないため、要素が移動します。

左から配置を試すことができますが、それは右からのサイズ変更を防ぐだけです (左隅をドラッグすると、要素が移動します)

または、ウィンドウのサイズ変更がドキュメント フローに影響を与えないように、この要素をドキュメント内の#wrapperdiv 内に静的に配置する必要があります。

于 2012-04-25T14:30:32.877 に答える
4

グラフィックはページの水平方向の中央に固定されているため、同じ中央を使用してオフセットすることができます。

#switch {
  height:50px;
  width:50px;
  background: #F00; /* Just so we can see it */
  position: absolute;
  top: 150px;
  left: 50%;  /* Put the left edge on the horizontal center */
  margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */
 }
于 2012-04-25T14:34:57.423 に答える
2

あなたがする必要があるのは、要素をどこに置きたいかを考えることです（固定はX/Yの座標位置に貼り付けます、絶対、ドキュメントとともに移動します、相対はそれがどこにあるかに対して非常に明確です）。

そうは言っても、次を使用して「アンカーポイント」を作成することをお勧めします

<div style="position: relative;" class="anchor-point">
   <div style="position: absolute; top: 100px; right: 50px;">
   <img href="" />
   </div>
</div>

このanchor-point要素をページの内側の領域に貼り付けることができる手段によりposition:absolute;、アンカーから任意の場所 (上/右/左/下) に移動できます。これを組み合わせてz-index、要素を好きなようにレイヤー化します。それ。

これにより、要素 (つまり pos:abs) が必要な場所に留まることが保証されます。

于 2012-04-25T14:41:15.680 に答える