媒體查詢忽略位置：固定

我已到處尋找解決方案，並且不能相信迄今爲止答案已經避開我。我在這裏出現是最後的手段。希望你不介意我挑選你的大腦。媒體查詢忽略位置：固定

在我正在建設的網站中，我試圖在屏幕右上方放置一個圖形。然後，當窗口縮小到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

媒體查詢忽略位置：固定

回答

相關問題