媒体查询忽略位置：固定

我已到处寻找解决方案，并且不能相信迄今为止答案已经避开我。我在这里出现是最后的手段。希望你不介意我挑选你的大脑。媒体查询忽略位置：固定

在我正在建设的网站中，我试图在屏幕右上方放置一个图形。然后，当窗口缩小到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.

谢谢。

马克

来源

2014-10-17 Mark Garlick

如果您发现任何张贴的答案有帮助，请记得要给予好评！ – 2014-10-17 22:41:28

这是因为top有更多的优先级是bottom因此被忽略底部的值：

当指定的顶部和底部，只要未指定高度，自动或100％，则顶部和底部距离都将受到尊重。否则，如果高度受到任何限制，top属性优先，而bottom属性被忽略。

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

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

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

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

来源

2014-10-17 21:50:58 DaniP

我忘了偏移量的'auto'值，太好了！如果OP为div添加边框，他会发现自己添加“bottom：0”只会延长框的高度，而框的内容仍然是从左上角开始的的块。 – 2014-10-17 21:55:09

非常感谢！ – 2014-10-17 22:34:34

试试这个：

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

来源

2014-10-17 21:47:39 Anon

@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，您已经扩展了块的高度。

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

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

来源

2014-10-17 22:04:38

非常感谢！ – 2014-10-17 22:37:13

媒体查询忽略位置：固定

回答

相关问题