@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 。是否可以坚持使用这个盒子，也许删除一个 class 并添加另一个？

Answer 1

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

top: auto;

不知道初始值时，也可以用initial:

top: initial;

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

top: unset;

或者，如果要将级联回滚到用户级别，使用revert:

top: revert;

另见 CSS Cascading and Inheritance Level 4 - Explicit Defaulting。

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