（ウィンドウのサイズ変更に固定されたまま）、特定の位置にdiv要素を固定

Question

私のサイトにVault X

を参照してください私は、ボールトクリッカブル機能の隣に光スイッチを作るしようとしています。

しかし、私のdivはこの位置に固定されていません（ウィンドウサイズを調整すると移動します）。

これを達成する最も良い方法は何ですか？

Answer 1

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

#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 */ 
} 

Answer 2

（ブラウザウィンドウ）position:fixedと常にこの場合（及び）position:absoluteを行う（またはより適切にここでposition:fixed）は、静的以外の位置を有する第一の親への文書の相対的な正常な流れ外部要素の位置を指定します。

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

あなたは左から位置決め試すことができますが、それは右からリサイズに対してのみガード（私は左の角をドラッグすると、要素が移動します）また

、あなたは内静的に、この要素を配置する必要があります文書のサイズを#wrapper divに変更して、ウィンドウのサイズを変更しても文書の流れに影響を与えないようにしてください。

Answer 3

絶対座標位置X/Y、それを固執するあなたは要素が（固定する場所を考える、である、文書で移動する、相対的にはかなり明確に相対的ですどこですか）。

anchor-pointはあなたのページの領域にこの要素を固執することができます意味だから、言って、私は「アンカーポイント」を作成することはお勧めします

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

を使用すると、position:absolute;と内側の部分は、あなたが移動することができますアンカーから任意の場所（上/右/左/下）に移動し、これをz-indexと組み合わせると、要素をどのようにレイヤーするかを指定できます。

これは、あなたの要素（pos：abs）があなたが望むところにとどまることを保証します。