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

CSSの位置：絶対;

位置：絶対; プロパティを使用すると、最も近い位置にある祖先を基準にして要素を配置できます。

例

次のコードを実行して、CSSの位置を実装してみてください：absolute; 

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.one {
            position: relative;
            width: 500px;
           height: 150px;
           border: 2px solid blue;
         }
         div.two {
            position: absolute;
            top: 70px;
            right: 0;
            width: 300px;
            height: 50px;
            border: 2px solid yellow;
         }
      </style>
   </head>
   <body>
      <h2>position: absolute;</h2>
      The position: absolute; property allows you to position element relative to the nearest positioned ancestor.
      <div class = "one">div has position: relative;
         <div class = "two">div has position: absolute;</div>
      </div>
   </body>
</html>

  1. CSSを使用した絶対測位

    CSSでの要素の配置を絶対値として定義できます。これにより、最初に配置された（静的を除く）親を基準にして要素がレンダリングされます。ポジショニング方法が絶対値である要素は、CSSポジショニングプロパティ（左、右、上、下）によって配置されます。 例 CSS絶対測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    top: 50%;   &

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

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