html – position：媒体查询中的绝对值覆盖所有其他规则

概述我有一个使用 bootstrap.的基本响应式设计我只是尝试给一个视口中的元素绝对定位,以及所有其他视图端口中的其他东西,但它覆盖了其他视图端口中的所有规则. 这是主要规则. .start-today { color:#fffeaf; font-size: 16px; font-weight: bold; letter-spacing: 0.3px; ma 我有一个使用 bootstrap.的基本响应式设计我只是尝试给一个视口中的元素绝对定位,以及所有其他视图端口中的其他东西,但它覆盖了其他视图端口中的所有规则.

这是主要规则.

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

解决方法 那是因为媒体查询提高了规则的特殊性.另一种方法是添加您的位置：基本样式中的绝对规则(在任何媒体查询之外),然后在您不再希望应用时在媒体查询中将其删除.例如,如果您想要停止将元素绝对定位在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;    }}

总结

以上是内存溢出为你收集整理的html – position：媒体查询中的绝对值覆盖所有其他规则全部内容，希望文章能够帮你解决html – position：媒体查询中的绝对值覆盖所有其他规则所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。