html - 位置 :absolute in media query is overriding all other rules

Question

我有一个基本的响应式设计，使用 bootstrap.我只是想在一个视口(viewport)中为元素提供绝对定位，在所有其他视口(viewport)中为其他元素提供绝对定位，但它会覆盖其他视口(viewport)中的所有规则。

主要规则如下。

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

以下是覆盖主要规则和所有其他视口(viewport)规则的最小视口(viewport)中的规则。

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

}

Answer 1

那是因为媒体查询提高了规则的特殊性。另一种方法是在基本样式中添加您的 position: absolute 规则(在任何媒体查询之外)，然后在您不再希望它应用时在媒体查询中将其删除。例如，如果您想停止将元素绝对定位在 500 像素处:

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