Html 位置：绝对媒体查询将覆盖所有其他规则

我有一个基本的响应式设计，我只是尝试在一个视口中为元素提供绝对位置，在所有其他视口中为其他元素提供绝对位置，但它覆盖了其他视口中的所有规则

以下是主要规则

 .start-today  {
    color:#fffeaf;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin-bottom:20px;
    float: right;
    text-align: center;
    margin-right: 20px;
    margin-top:40px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
}
.start-today a {
       color:#fffeaf;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
    transition: color 0.5s ease;
}

以下是覆盖主规则和所有其他视口规则的最小视口中的规则

  @media only screen and (min-width:320px) {

.start-today {
        color:#fffeaf;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.3px;
        text-align: center;
        position: absolute; bottom:100px; left:2px;
        }
        .start-today a {
            font-size:12px;
        }

}

---

使用320px的

最小宽度

，样式将应用于宽度为320px或更大的视口

---

您是否打算使用320px的

最大宽度

，以便绝对定位仅应用于320px或更低的视口

您使用的是

minwidth:320px

，我不知道有比

320px

更小的屏幕，因此查询总是会被触发

尝试将

min

更改为

max

或调整

px

如下所示：

@仅媒体屏幕和（最大宽度：320px）

或此：

@仅媒体屏幕和（最小宽度：720px）

所有其他查询都需要从

绝对

设置回

相对

---

这样：

位置：相对
这是因为媒体查询提高了规则的特殊性。另一种方法是在基本样式中添加
position:absolute
规则（在任何媒体查询之外），然后在不再需要应用该规则时在媒体查询中删除该规则。例如，如果要停止将元素绝对定位在500px：

// Set your initial rule:
.start-today {
    position: absolute;
    bottom: 100px;
    left: 2px;
}

@media only screen and (min-width: 500px) {
    .start-today {
        // reset your rules here:
        position: relative;
        bottom: auto;
        left: auto;
    }
}

我想你是说

 @media only screen and (max-width:320px)

最大值而非最小值

所以它适用于小于320的尺寸，，，，
在您当前的演员阵容中，它适用于所有尺寸超过320的演员
您需要添加
位置：相对或您的
中的其他代码。今天从主代码开始
，这样它就有了退路