CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの位置：修正済み。

位置：固定; プロパティを使用すると、ビューポートを基準にして要素を配置できます。次のコードを実行して、CSSの位置を実装してみてください。fixed;

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{
            position: fixed;
            bottom: 0;
            right: 0;
            width: 200px;
            border: 3px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>position: fixed;</h2>
      <p>The position: fixed; property allows you to position element relative to the viewport.</p>
      <div>
         div has position: fixed;
      </div>
   </body>
</html>

出力

CSSの位置：修正済み。


  1. CSSポジショニング要素

    positionプロパティは、要素の配置に使用されます。つまり、以下はポジショニング要素です- 静的 −要素ボックスは、通常のドキュメントフローの一部として、前の要素と前の要素の後に配置されます。 相対 −要素のボックスは、通常の流れの一部として配置されてから、ある程度の距離だけオフセットされます。 絶対 −要素のボックスは、それを含むブロックに関連して配置され、ドキュメントの通常のフローから完全に削除されます。 修正済み −要素のボックスは絶対的に配置され、位置について説明されているすべての動作が絶対的です。 以下は、CSSを使用して要素を配置するためのコードで

  2. 交差点オブザーバーを使用して、要素がCSS位置で固定されるタイミングを検出します：スティッキー

    スティッキーな位置の要素にさまざまなCSSスタイルを適用することで、簡単に検出できます。 次の例は、このプロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> #first {    background-color: lightgrey;    height: 10px; } #navbar-top {    background-color: lightgrey;    height: 2px; } #cont