位置：固定;ビューポートの要素を基にしていません

私はいくつかの場所でその位置を読みました：固定;通常のドキュメントフローから削除されているため、親要素ではなく、ビューポートに要素を配置する必要があります。しかし、次のコードで見られるように、このように動作するようです。位置が固定された要素は、親要素の開始点をとります。何を与える！ありがとう。位置：固定;ビューポートの要素を基にしていません

<!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

フィードバックいただきありがとうございます。だから私が配置（上、左など）を使用しない場合、position：fixedの要素。配置の基礎としてのビューポートではなく、親要素を使用します。 – jlindop

プレースメントを使用しない場合は、あたかも 'position：static;'のようにコードに配置されます。 – rblarsen

位置と要素：絶対。（ビューポートに対して固定されたように配置されているのではなく）最も近い位置にある祖先を基準にして配置されます。

出典：http://www.w3schools.com/css/css_positioning.asp

出典

2017-02-08 08:25:20

位置：固定;ビューポートの要素を基にしていません

答えて

関連する問題