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

CSSポジショニング要素

positionプロパティは、要素の配置に使用されます。つまり、以下はポジショニング要素です-

  • 静的 −要素ボックスは、通常のドキュメントフローの一部として、前の要素と前の要素の後に配置されます。

  • 相対 −要素のボックスは、通常の流れの一部として配置されてから、ある程度の距離だけオフセットされます。

  • 絶対 −要素のボックスは、それを含むブロックに関連して配置され、ドキュメントの通常のフローから完全に削除されます。

  • 修正済み −要素のボックスは絶対的に配置され、位置について説明されているすべての動作が絶対的です。

以下は、CSSを使用して要素を配置するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   color: white;
   text-align: center;
   height: 100px;
   width: 100px;
}
.static {
   position: static;
   background-color: greenyellow;
}
.relative {
   position: relative;
   left: 50px;
   background-color: rgb(255, 47, 47);
}
.absolute {
   position: absolute;
   right: 50px;
   top: 20px;
   background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSポジショニング要素



  1. CSS疑似要素

    最初の文字、最初の行、またはその前後に挿入するなど、要素の特定の部分のスタイルを設定できます。これらの目的のために、CSS疑似要素が使用されます。 注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似要素はダブルコロン表記を使用します。 構文 以下は、要素でCSS疑似要素を使用するための構文です- Selector::pseudo-element {    css-property: /*value*/; } 以下は、利用可能なすべてのCSS疑似要素です- Sr.No 疑似要素と説明 1 後 言及された各要素のコンテンツの後

  2. CSSのpositionプロパティを使用して要素を整列する

    CSSポジショニングスキーマメソッド（固定、相対、絶対、静的）とプロパティ（左、右、上、下）を使用して要素を整列できます。 例 ポジショニングスキーマを使用して要素を整列させる例を見てみましょう- <!DOCTYPE html> <html> <head> <title>Alignment using CSS Position</title> <style> .screen {    padding: 10px;    width: 70%;    margin