固定一个div到一定位置（保持固定的窗口大小调整）

请参考我的网站Vault X 固定一个div到一定位置（保持固定的窗口大小调整）

我一直在试图让旁边的保管库可点击功能灯的开关。

但是，我无法让我的div保持固定在这个位置（调整窗口大小导致它移动）。

达到此目的的最佳方法是什么？

2012-04-25 Sean Zulu

由于您的图形固定在页面的水平中心，因此可以使用相同的中心，然后使用偏移。

#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-25 14:34:57 rgthree

如果我然后调整窗口左侧的大小，元素仍然会移动。 – 2012-04-25 14:37:11

它会移动，但与中心一样，图形。当您调整窗口宽度时，它仍然会放置在图形中的lightswitch上。 – rgthree 2012-04-25 14:38:25

它仍然移动调整大小，但我想出了创建交换机作为一个单独的图像的解决方案，所以如果位置稍微关闭也无关紧要。 – 2012-04-25 15:26:27

（与position:fixed）浏览器窗口在这种情况下（和总是）做position:absolute（或更适当地在这里position:fixed）指定相对于文件的到具有比静态其他的位置上的第一个亲本的正常流动之外的元件位置。

因此，既然你已经指定了一个顶部和一个正确的位置，这些值是固定的。当您将右边框移入时，与浏览器视口的距离必须保持不变，以便元素移动。

您可以从左侧尝试定位，但只会针对从右侧调整后卫（如果我拖到左边的角落，该元素将移动）

另外，您应该静态中的位置这个元素文档，在您的#wrapper div中，以便调整窗口大小对文档流没有影响。

来源

2012-04-25 14:30:32

你需要做的是，想想你想要的元素被（固定将坚持在一个坐标位置什么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-25 14:41:15 Jakub

固定一个div到一定位置（保持固定的窗口大小调整）

回答

相关问题