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不可继承，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%;
 }
}

@media删除顶部：0;来自风格

2 个答案: