Question

我正在尝试为我的应用创建响应式设计。

我有一个很大的背景图片，当用户有大屏幕时会显示完整尺寸，如果用户使用小屏幕则只显示部分尺寸。

我想在我的应用上放置一些绝对位置的元素，但问题是我无法锁定它们的顶部和左侧值，因为屏幕尺寸会发生变化。

我有类似

的东西

CSS

#background{
    background: url('BG.jpg') no-repeat top center fixed;
    width: 1900px;
    height: 1200px; 
}

#element{
   position: fixed;
   z-index: 5;
   top: 50%;   //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
   left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}

HTML

<div id='background'></div>
<img id='element' src='test.jpg' />

当用户屏幕较小时，如何将元素的位置保持在同一位置？谢谢你的帮助！

Answer 1

使用position: absolute时，您需要确保其父级的position属性不是默认值（static）。如果没有这样的父母，则该文件是有效的父母。对于你的例子，我建议让img＃元素成为div＃background的孩子，如此

<div id='background'>
    <img id='element' src='test.jpg' />
</div>

然后将position:relative;添加到#background css样式

#background{
    background: url('BG.jpg') no-repeat top center fixed;
    width: 1900px;
    height: 1200px;
    position: relative;
}

使用relative的原因是因为它不会从文档流中取出元素（如fixed或absolute）并且只要你不这样做为父级（案例中为top）指定left，right，“底部”或#background属性，它将保留在与...相同的位置默认定位。

编辑：

我不认为这对您来说是开箱即用的。你需要弄清楚如何使图像的宽度动态。您可以为其指定基于百分比的宽度或使用媒体查询。

编辑2：

我也注意到你position:fixed有img#element。将其更改为position:absolute。这将使它相对于position:relative父而不是窗口定位。

Answer 2

考虑制作一个计算屏幕宽度的javascript函数。之后添加margin-left到#background等于（屏幕宽度/ -2）。制作#background width＆amp;身高 - 100％

如何使用绝对位置定位元素？

2 个答案:

编辑：

编辑2：