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

CSSによる相対的な位置付け

相対配置は、通常表示される場所に対するHTML要素の位置を変更します。したがって、「left：20」は要素の左位置に20ピクセルを追加します。

2つの値を使用できますtop および左 位置と一緒に HTML要素をHTMLドキュメント内の任意の場所に移動するためのプロパティ。

  • 左に移動-左には負の値を使用します 。
  • 右に移動-左に正の値を使用します。
  • 上に移動-topに負の値を使用します。
  • 下に移動-topに正の値を使用します。
例

次のコードを実行して、相対ポジショニングを実装してみてください-

<html>
   <head>
   </head>
      <body>
         <div style = "position:relative;left:80px;top:2px;background-color:yellow;">
            This div has relative positioning.
         </div>
      </body>
</html>

  1. CSSで機能する相対ポジショニング

    CSSでの要素の配置は、要素を通常どおりにレンダリングする相対的なものとして定義できます。相対的な配置方法を持つ要素は、CSSの配置プロパティ（左、右、上、下）によって配置されます。 例 CSS相対測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0; } div:first-child {    position: relative;    top:20px;    backg

  2. CSSを使用したフローティング要素

    CSS floatプロパティは、ボックスまたはコンテンツの配置またはフォーマットに使用されます。開発者は、CSSフロートを使用して要素を左また​​は右に配置できます。 floatプロパティには、次のいずれかの値を指定できます- 左 −要素はコンテナの左側に浮かんでいます 正しい −要素はそのコンテナの右側に浮かんでいます なし −要素はフロートしません。デフォルト値です 継承 −要素はその親のfloat値を継承します 例 CSSFloatプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title&