Question

我在fixed定位包装中放置了这个absolute按钮。我想在包装器内对齐按钮，但是在右边。

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

我知道fixed位置打破了流量，但我知道可以做到这一点，我只是无法弄清楚这是否有效。

这是标记：

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

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


    </div>

这是FIDDLE

Answer 1

实际上你已经将.menuButton div从左右两个拉到了0距离所以只是删除左：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;           
    }

Answer 2

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

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

Answer 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

时不需要

Answer 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;
        }
}

固定定位div以在绝对定位div内对齐

4 个答案: