Question

我到处寻找解决方案，无法相信到目前为止答案已经无法解决。我在这里露面是最后的选择。希望你不介意我动脑筋。

在我正在建设的网站中，我试图在屏幕的右上角放置一个图形。然后当窗口缩小到760px或更小时，我希望它移动到底部。无论我做什么，事情都不会移到最底层。它保持在顶部。这是一些非常简单的代码，它在这里也不起作用：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css.css" id="theme_color">
</head>

<body>

<div class="mydiv">HELLO!</div>

</body>
</html>

和CSS：

@charset "utf-8";
/* CSS Document */

.mydiv { 
    position:fixed;
    top:0;
    right:0;
}

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

.mydiv { 
    bottom:0;
}
}

这就是所有的代码。你看到“你好”这个词出现在右上角。但是当你使浏览器窗口变窄时，不是像我想的那样移动到底部，而是保持在顶部。

但是......如果改变了CSS，那么div从底部开始（宽屏幕）并在缩小时移动到顶部，它可以正常工作：

.mydiv { 
    position:fixed;
    bottom:0;
    right:0;
}

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

.mydiv { 
    top:0;
}
}

完全难倒。想法？尝试了Chrome，FF和IE，所有最新版本。 Windows 7。

感谢。

标记

Answer 1

这是因为top的优先级高于bottom所以底部的值会被忽略：

如果指定了顶部和底部，只要未指定高度，自动或100％，顶部和底部距离都将得到遵守。否则，如果以任何方式约束高度，则top属性优先，底部属性被忽略。

所以你需要将top设置为auto，试试这个：

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

.mydiv { 
    bottom:0;
    top:auto;
}
}

检查此演示http://jsfiddle.net/brsrmq4v/

Answer 2

试试这个：

@media only screen and (max-width: 760px) {
    .mydiv { 
        top:0;
        bottom:auto;
    }
}

Answer 3

@Danko发布了此修复程序，您需要设置top: auto（默认值）以取消top: 0的效果。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/top

如果您想深入了解top和bottom值是如何计算机的，请参阅CSS规范：

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

如果您向div添加边框，则可以更清楚地看到原始代码的作用。

通过设置bottom: 0，您可以扩展块的高度。

＆＃13;

.mydiv {
    position:fixed;
    border: 1px dotted blue;
    top:0;
    right:0;
}
@media only screen and (max-width: 760px) {
    .mydiv {
        bottom: 0;
    }
}

＆＃13;

<div class="mydiv">HELLO!</div>

＆＃13;

媒体查询忽略位置：已修复

3 个答案: