使用 CSS3 将固定元素定位在页面的右下角答案

【问题标题】：Position fixed element in bottom right corner of page with CSS3使用 CSS3 将固定元素定位在页面的右下角
【发布时间】：2015-08-04 15:22:58
【问题描述】：

我的页面最大宽度为 1280 像素。使用margin: 0 auto;，主体在较大的屏幕上居中。现在我想在右下角放置一个元素。这必须修复，因为它应该随着内容滚动。在大于 1280 像素的屏幕上，该元素应保持在居中的主体的一角，而不是粘在窗口的右侧。

元素应该固定在那里，与当前视口宽度无关。

我通过结合使用 media-query 和 CSS3-calc 操作解决了这个问题。对于这个简单的任务来说，这感觉有点过头了，但我找不到像我这样简单的解决方案。这是一些示例 css（我在这里将最大页面宽度更改为 500px）：

body {
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}

div {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
}

@media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
    div {    
        margin-right: -webkit-calc((100% - 500px) / 2);
        margin-right: -moz-calc((100% - 500px) / 2);
        margin-right: calc((100% - 500px) / 2);
    }
}

JSFiddle：https://jsfiddle.net/nh95dc8u/

我的 JSFiddle 准确地显示了我想要的。我只是在问这是否可以通过更多“标准 CSS”来实现（我不太确定跨不同浏览器的计算）？还有什么更简单的解决方案？

【问题讨论】：

你是救世主！！！！太感谢了。这解决了我问题的第一部分。现在我需要解决第二个问题。如何隐藏我的 div 的外部（我的 div 的一部分隐藏在内容之外的正文中，并且现在显示调整大小）。 ?!:) 但我认为最困难的是完成。再次感谢你！ ——

标签： html css css-position

【解决方案1】：

@media all and (min-width: 515px) {
    div {    
        right: 50%;
        margin-right: -250px;
  }

将固定 div 移动到窗口宽度的 50%，然后移动到容器宽度的 50% https://jsfiddle.net/nh95dc8u/5/

【讨论】：

不错的一个！简单，易于理解，并且不需要任何额外的元素或包装器。我喜欢，谢谢:)
请注意，任何带有媒体查询的东西都不能在 IE 8 及更低版本中工作，而 Kazzkiq 的解决方案可以。
@Siguza：你当然是对的，但我只需要支持 IE10 及更高版本，所以我可以使用 CSS3 解决方案 :)
好吧，要让它在 ie8 中工作，只需交换主 css 定位和媒体查询中的那个，然后将 @media all and (min-width: 515px) 更改为 @media all and (max-width: 515px) 。之后，由于IE8是桌面浏览器，就可以了。（顺便说一句，现在谁使用 IE8？只有在 IE8 中测试他们的网站的 web dewelopers :)）
在我看来 IE8 完全不支持媒体查询：caniuse.com/#feat=css-mediaqueries

【解决方案2】：

您可以通过将calc 和媒体查询包装在另一个div 中来摆脱它，该div 像body 一样水平对齐，并且与body 具有相同的宽度，但固定并粘在底部屏幕。
在该 div 中，您可以将红色小框浮动到右侧。

虽然外部 div 似乎只表现得像 body 与 max-width: 100% 和 width 设置为 body 的 max-width + 2（左右边框）：

body
{
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}
.hack
{
    position: fixed;
    bottom: 0;
    max-width: 100%;
    width: 502px;
    margin: 0 auto;
    padding: 0;
}
.box
{
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
    float: right;
}

<body>
    This is the centered body
    <div class="hack">
        <div class="box">E</div>
    </div>
</body>

Updated fiddle.

在 Chrome 44 和 IE 8 中测试和工作。

【讨论】：

不错的方法，但似乎由于全宽的包装 div 我可能无法选择底层元素。检查jsfiddle.net/nh95dc8u/7 并尝试选择红色元素左侧的文本。
你说得对，忘记了。可以用pointer-events:none; 修复.hack 和pointer-events:all; 用于.box 用于newer browsers，你可能会想出一个针对旧浏览器的基于z-index 的hack，但它会变得笨拙......看起来就像 Kazzkiq 在这里有最干净的解决方案。
我已经尝试过与您提到的指针事件类似的东西，但不幸的是我无法在.box 上获得点击事件以在 FF 中工作（Chrome 很好，没有尝试过 IE）。
我又试了一次，是的，你是对的，也适用于我：jsfiddle.net/nh95dc8u/12 我想我在第一次尝试时犯了一些错误；）

【解决方案3】：

你也可以只用一个更多的元素和一点 CSS。

例如，您的 HTML 可能是：

<div class="content">
  Your content here

    <div class="fixed-wrapper">
        <div class="fixed">HEY</div>
    </div>
</div>

然后，CSS：

.content {
    max-width: 500px;
    margin:0 auto;
    position:relative;
}

.fixed-wrapper {
    position:absolute;
    bottom:0;
    right:0;
    width:30px;
    height:30px;
}

.fixed-wrapper .fixed {
    position:fixed;
    width:30px;
    height:30px;
    bottom:0;
    background:red;

}

通过将position:relative 添加到.content 并对固定元素使用包装器，您可以将其放置在您想要的位置。由于没有指定位置的元素呈现其父元素所在的位置，您只需从固定元素中省略 right 属性，让包装器为您定位它。

例如，请参阅`FIDDLE`。

【讨论】：

【解决方案4】：

删除media-query 也可以，删除并再次查看输出

Output

【讨论】：

直接在 div 上使用 margin-right calc 操作将导致我的元素从屏幕视图中踢出
我认为你误解了这个问题。
缺少计算操作会导致元素被粘在视口的右侧，这不是我想要的......

【解决方案5】：

用简单的 css 试试这个 -

.main{
    width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;  
}
.footer {
    position:fixed;
    bottom: 0;
    height: 30px;
    width: 30px;
    left:510px;
    background-color: red;

}

这是小提琴 - https://jsfiddle.net/maL5nvbu/

【讨论】：

使用该代码，它将距离左侧 510 像素，很少在右下角。

例如，请参阅FIDDLE。

例如，请参阅`FIDDLE`。