固定定位的 div 以在绝对定位的 div 内右对齐答案

【问题标题】：Fixed positioned div to align right within absolute positioned div固定定位的 div 以在绝对定位的 div 内右对齐
【发布时间】：2015-07-28 23:50:19
【问题描述】：

我在absolute 定位包装器中有这个fixed 定位按钮。我想将包装器内的按钮对齐，但要向右对齐。

现在我只能将它在包装器内居中对齐或在包装器内左对齐。

我知道fixed 的位置打破了流程，但我知道可以做到这一点，我只是想不通。

这里是标记：

<div id="nav-container">
    <div id="logo-white">LOGO</div>

    <div class="menuButton">menu</div>


    </div>

这是FIDDLE

【问题讨论】：

不，这是不可能的。固定定位的参考点始终是视口。

标签： html css fixed absolute

【解决方案1】：

实际上，您已将 .menuButton div 从左右拉到 0 距离，所以 只需删除 left:0px; 并将位置更改为 position:absolute;在 .menuButton

Working Demo：已更新

 .menuButton {
        height:35px;
        width: 35px;
        background: #39C;
        position: absolute; /* Changed from fixed */
        cursor: pointer;
        z-index: 999;
        top: 25px;
        right: 0px;
        /*left: 0px; ---- REMOVED */
        margin: 0px auto;           
    }

【讨论】：

我想在绝对定位的包装器中添加按钮。在您的示例中，它似乎在外面？
现在只需检查更新的答案，如果仍有任何问题，请随时提问。
现在好像没有修复？我需要修复这个按钮，
实际上没有得到你想说的。滚动页面时，您希望该按钮位于同一位置吗？如果是这样，那么它将不在 .nav-container div 中。 .nav-container div 将向上移动，而菜单保持在提到的固定位置
我希望按钮被修复，但在具有绿色区域的 .nav-container div 区域内。按钮的位置应该在右边。基本上你更新的演示是怎样的，但只是按钮有固定位置的地方。这有意义吗？

【解决方案2】：

这是您正确对齐的解决方案：

 .menuButton {
        height:35px;
        width: 35px;
        background: #39C;
        float:right;
        cursor: pointer;
        z-index: 999;
        top: 25px;      
    }

【讨论】：

我只能看到你删除了固定位置。该按钮需要修复。

【解决方案3】：

检查这个fiddle

     .menuButton {
        height:35px;
        width: 35px;
        background: #39C;
        position: fixed;
        cursor: pointer;
        z-index: 999;
        top: 25px;
        right: 0px;
        /*left: 0px; removed as its not necessary when right as 0 */
        margin: 0px auto;           
    }

我删除了左属性，因为当右设置为 0 时不需要它

【讨论】：

我也做到了这一点。我想让按钮与其余内容对齐，那么是否可以将按钮放置在导航容器绿色区域内的右侧并且仍然要修复按钮？
如果位置是固定的。您不能将内容包装在外部容器中。所以最好把它改成相对的。使菜单停留在绿色区域。注意：固定位置将始终固定为浏览器布局而不是内容布局，因此您无法在容器内移动菜单
我已经尝试通过媒体查询来做到这一点。我现在随心所欲地拥有它。这是一个不好的方法吗？ jsfiddle.net/9v4o5sjo/8

【解决方案4】：

在这个FIDDLE 中，我有我想要的设置。

我已经使用媒体查询来获得想要的输出。

如果这是不好的做法，请告诉我？

 .menuButton {
        height:35px;
        width: 35px;
        background: #39C;
        position: fixed;
        cursor: pointer;
        z-index: 999;
        top: 25px;
        right: -890px;
        left: 0px;
        margin: 0px auto;   
        }

@media screen and (max-width: 960px) {
   .menuButton {
        right: 25px !important;
        margin: 0px;
        left:auto;
        }
}

【讨论】：