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

CSSを使用した静的ポジショニング

CSSでの要素の配置は、要素を特別な方法ではなく通常の方法でレンダリングする静的なものとして定義できます。静的に配置されている要素は、CSSの配置プロパティ（左、右、上、下）の影響を受けません。

例

CSS静的測位方法の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
}
div:first-child {
   position: static;
   background-color: orange;
   text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html>

出力

上記のコードの出力は次のとおりです-

CSSを使用した静的ポジショニング

例

ポジショニング方法の別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   border: 2px double #a43356;
   margin: 5px;
   padding: 5px;
}
#d1 {
   position: relative;
   height: 10em;
}
#d2 {
   position: absolute;
   width: 20%;
   bottom: 10px; /*relative to parent d1*/
}
#d3 {
   position: fixed;
   width: 30%;
   top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力

上記のコードの出力は次のとおりです-

CSSを使用した静的ポジショニング


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;