CSS：水平居中固定按钮，并为边距顶部设置动画。

Question

我遇到了问题。我觉得我的css知识已经一劳永逸地结束了。 我的问题是如下。 正如你在图片中看到的那样，我有一个固定的标题，一个标题栏和一个按钮，它们全部浮动在其他内容之上，如果用户滚动则不会移动。

.headerBarGreen {
        background-color: #7ac4a7;
        width: 100%;
        height: 5px;
        margin-top: 70px;
        position: fixed;
        -webkit-box-shadow: 0 5px 10px -2px #000000;
        -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;
        z-index: 1000;


}

.button {
        background-color: #7ac4a7;
        color: #ffffff;
        width: 70px;
        position: fixed;
        margin: 0 auto;
        margin-top: 75px;
        left: 0;
        right: 0;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        font-family:'poetsenoneregular', sans-serif !important;
        -webkit-box-shadow: 0 5px 10px -3px #2c2929;
        -moz-box-shadow: 0 4px 6px -3px #2c2929;
        box-shadow: 0 4px 6px -3px #2c2929;
        z-index: 1000;
}

现在我希望标题栏和按钮向下移动以打开下拉列表。 那对标题栏来说效果很好，但不适用于按钮。

我相信原因是因为我使用了margin：0 auto，属性将按钮水平居中。 我尝试了所有失败的事情：

我将按钮放在宽度为100％且边距为75px的div中。 然后按钮没有上边距，只有边距0：自动; 当然，它被怀疑在页面顶部浮动。

我还尝试从按钮中移除position：fixed属性并仅将其放置 在容器中。发生的事情是，按钮现在只浮动到左侧。 保证金顶部是正确的。

我试过的最后一件事是把位置：固定按钮带边距：0自动装在一个边距为75px的容器中，也有一个固定位置。 现在图片看起来就像我给你看的那样。

在每种情况下：当我为其设置动画时，按钮不会像标题栏那样向下移动。

我为条形图和按钮设置了动画：

BAR：

$(".headerBarGreen").animate({marginTop: "390px"}, 500);

按钮：

$("#button").animate({marginTop: "395px"}, 500);    

我很乐意提供任何帮助。

谢谢你。干杯，马文。

Answer 1

幸运的是，我已经找到了答案。

正如您在我的代码中看到的那样，我试图使用其id来设置按钮的动画效果。 我现在尝试动画我给它的课程，一切都像魅力一样。

问题已关闭