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

CSSを使用した絶対測位

CSSでの要素の配置を絶対値として定義できます。これにより、最初に配置された（静的を除く）親を基準にして要素がレンダリングされます。ポジショニング方法が絶対値である要素は、CSSポジショニングプロパティ（左、右、上、下）によって配置されます。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div:first-child {
   background-color: orange;
   text-align: center;
}
div:last-child {
   width: 250px;
   height: 100px;
   margin: auto;
   background-color: turquoise;
   position: absolute;
   z-index: -1;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</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">MySQL is the most popular Open Source Relational SQL Database Management System. 
MySQL is one of the best RDBMS being used for developing various web-based software applications. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力

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

CSSを使用した絶対測位


  1. CSSの背景の添付ファイル

    CSSのbackground-attachmentプロパティは、ビューポートに対してページをスクロールするときの背景画像の位置を指定するために使用されます。値をスクロール、固定、ローカルにすることができます。 構文 CSSbackground-attachmentプロパティの構文は次のとおりです- Selector {    background-attachment: /*value*/ } 例 次の例は、CSSのbackground-attachmentプロパティ-を示しています。 <!DOCTYPE html> <html> <hea

  2. CSSを使用した固定ポジショニング

    CSSでの要素の配置を固定として定義し、ユーザーのビューポートを基準にして要素をレンダリングすることができます。ポジショニング方法が固定されている要素は、スクロールしても移動せず、CSSポジショニングプロパティ（左、右、上、下）によって配置されます。 例 CSS固定測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    top: 50%; &nbs