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

【问题标题】：How to position the element using absolute position?如何使用绝对位置定位元素？
【发布时间】：2014-03-05 10:11:16
【问题描述】：

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

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

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

我有类似的东西

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' />

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

【问题讨论】：

要么在css中使用@media查询，要么你必须使用js来做一些计算。
我尝试过@media 查询，但没有运气。请您提供一些计算示例吗？
您可以使用background-size:cover 对容器边界进行背景收缩/拉伸。请注意，旧版浏览器不支持它
所以在较小的屏幕上，背景仍然是 1900 x 1200？另外，您希望元素是固定的还是绝对的？

标签： javascript jquery html css responsive-design

【解决方案1】：

使用position: absolute 时，您需要确保它的父级具有position 属性而不是默认属性（即static）。如果没有这样的父级，则该文档是有效的父级。对于您的示例，我建议将 img#element 设为 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、'bottom' 或 right 属性到父级（在这种情况下为#background），它将保持在与默认定位相同的位置。

编辑：

我不认为这对你来说是开箱即用的。您还需要弄清楚如何使图像的宽度动态化。您可以给它一个基于 % 的宽度或使用媒体查询。

编辑 2：

Ia 还刚刚注意到您有 position:fixed 与 img#element。将其更改为position:absolute。这将使它相对于 position:relative 父级而不是窗口定位。

【讨论】：

【解决方案2】：

考虑制作一个计算屏幕宽度的 javascript 函数。之后将 margin-left 添加到#background 等于（屏幕宽度/ -2）。使#background 宽度和高度 - 100%

【讨论】：