在我的网页中,我有一个 div,它在左侧保持静态,即使用户滚动也是如此。
这是 div 的 CSS:
.floatingDiv
{
position:fixed;
top:300px;
left:70px;
padding:16px;
}
如您所见,我将 div 定位到页面的左上角。
但是,我的主要内容只有大约 1000 像素宽,我想将此 div 放置在内容的左边缘而不是屏幕的左边缘。在我的 1440x900 分辨率下,div 当前正好位于屏幕左边缘和内容左边缘的中间位置,但如果有人使用宽屏显示器,这个 float 的 div 离内容相当远。
最佳答案
来自 Sitepoint:http://reference.sitepoint.com/css/position
fixed 值生成一个相对于初始包含 block (通常是视口(viewport))定位的绝对定位框。可以使用一个或多个属性 top、right、bottom、离开。在打印媒体类型中,该元素呈现在每个页面上。
所以你的 div 应该放在你的内容容器中,然后确保你在内容容器上有 position:relative 以便它作为所有子元素定位的引用。这与 position:absolute 相同。
<div style='position:relative'>
my main container
<div style='position:fixed;top:300px;left:70px;'>this is my fixed element</div>
</div>
关于html - 将 div 定位在内容的左侧而不是页面的左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7918017/