職位：固定;不在視口中的基本元素

我已經在一些地方讀過這個位置：fixed;應該將元素基於視口，而不是它的父元素，因爲它已從正常的文檔流中移除。但是，從以下代碼中可以看出，它似乎以這種方式工作。具有固定位置的元素將其作爲父元素的起點。是什麼賦予了！？謝謝。職位：固定;不在視口中的基本元素

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" href="cssreset.css"> 
 
<head> 
 
<title>TTK</title> 
 
<style> 
 
* { 
 
\t box-sizing: border-box; 
 
} 
 
.container { 
 
\t width: 500px; 
 
\t height: 500px; 
 
\t margin: 25px auto; 
 
\t border: 5px solid black; 
 
\t position: relative; 
 
\t background: yellow; 
 
} 
 
.positionFixed { 
 
\t width: 750px; 
 
\t height: 250px; 
 
\t border: 3px solid blue; /* why does the border not show up */ 
 
\t position: fixed; 
 
\t background: red; 
 
} 
 
</style> 
 
</head>] 
 
<body> 
 
<div class="container"> 
 
\t <div class="positionFixed"></div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-02-08 jlindop

我不明白在CSS評論的問題，這裏是一個工作[的jsfiddle（https://jsfiddle.net/DomeTune/7cymedo7/）的'固定在positionFixed'is左上角，如果你不添加rblarsen的答案的方面。由於positionFixed寬度較大的事實，它會覆蓋容器。 – DomeTune

如果你不告訴其中position:fixed;元素應該是，它不會知道。添加一些展示位置（頂部，左側，右側和/或底部），並且應該放置正確。

.positionFixed { 
    width: 750px; 
    height: 250px; 
    border: 3px solid blue; /* why does the border not show up */ 
    position: fixed; 
    top:0; 
    left:0; 
    background: red; 
}

來源

2017-02-08 08:24:01 rblarsen

感謝您的反饋。好吧，如果我沒有使用任何位置（頂部，左側等），那麼位置的元素：固定;將使用它的父元素，而不是視口作爲放置的基礎。 – jlindop

如果你不使用任何位置，它將放置在代碼中的位置，就好像它具有'position：static;' – rblarsen

與位置的元素：絕對;被定位爲相對於最近定位的祖先（而不是相對於視口定位，如固定）。

來源：http://www.w3schools.com/css/css_positioning.asp

來源

2017-02-08 08:25:20

職位：固定;不在視口中的基本元素

回答

相關問題