在任何屏幕尺寸下将 div 向右浮动，边距向右答案

【问题标题】：Float div to right with margin right at any screen size在任何屏幕尺寸下将 div 向右浮动，边距向右
【发布时间】：2014-05-28 17:59:43
【问题描述】：

我有背景图片（图片大小为 2600x1170）

sbBody {
    background: #999 url(footer_bg.jpg) center top no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 1105px;
    font-family: Serif, Georgia, Times New Roman, Times;
    font-size: 12px;
}

我在这个图像上有一个特殊区域（在图像的右侧），我需要显示应该在这个区域的特殊 div，我用浮动右边和边距做到了

.main_box {
    float: right;
    margin-right: 505px;
    margin-top: 75px;
}

它在 1900x1200 的屏幕分辨率下看起来不错，但是如果我更改浏览器大小，我的边距 div 就会损坏。在浏览器窗口超过 800 像素之前，我如何才能拥有相同的 div 位置；

<body class="sbBody">
    <div class="main_box">
    </div>
</body>

谢谢。

【问题讨论】：

旁注：CSS 中的错字，sbBody 错过了类点。
google 用于 css 媒体查询，可能主框需要宽度

标签： jquery html css

【解决方案1】：

当您将div 浮动到右侧时，您需要使用以下方法将背景固定在顶部和右侧：

background-position:top right;

而不是top center

看到这个DEMO

CSS：

.sbBody {
    background: #999 url(http://lorempixel.com/output/nature-q-g-1280-720-10.jpg) right top no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 1105px;
    font-family: Serif, Georgia, Times New Roman, Times;
    font-size: 12px;
}
.main_box {
    float: right;
    margin-right: 505px;
    margin-top: 75px;
    background:gold;

}

【讨论】：

这点很好，但效果是一样的。我认为图像大小的问题。但我无法改变它
@a3code 你能否为你的问题创建一个小提琴，这样我就可以看到我能做什么。
您总是可以设置图像而不是设置背景，然后使用媒体查询来调整图像的大小和位置。然后使用 z-index 来定位图层，虽然这是非正统的，但不推荐。您还可以使用 JavaScript 并运行返回所需定位的函数