@media删除top：0; 从风格

Question

所以我在这个小事情上浪费了很多时间。 希望有人在这里可以帮助我。

我有一个右侧导航面板。

.navbar_right{
 width: 365px;
 top:0;
 height:100%;
 position:fixed;
 right:0;
}

现在，当我的网站以1400的宽度折断时，我希望将相同的菜单放置在右侧，但在底部而不是顶部。 那么我该如何删除top:0; 并添加bottom:0; 代替。

@media (max-width: 1400px) {
 .navbar_right{
 bottom:0;
 height:40%;
 }
}

我希望能够使用相同的容器，因为我正在使用的平台会将内容推送到导航面板中，因此，如果我能做到这一点，我会节省很多资源。 同样，出于相同的原因，我也希望避免使用jQuery。 是否可以坚持使用此框，也许删除一堂课并添加另一堂课？

Answer 1

将top设置为其初始值，即auto ：

top: auto;

当您不知道初始值时，也可以使用initial ：

top: initial;

或者，由于top in不可继承，因此未unset也会将其重置为初始值：

top: unset;

或者，如果您想将级联回滚到用户级别，请使用revert ：

top: revert;

另请参见CSS级联和继承级别4-显式默认设置 。

Answer 2

.navbar_right{
 width: 365px;
 position:fixed;
 right:0;
}

@media (max-width: 1400px) {
 .navbar_right{
 bottom:0;
 height:40%;
 }
}

@media (min-width: 1399px) {
 .navbar_right{
 top:0;
 height:100%;
 }
}