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

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

CSSでの要素の配置は、要素を通常どおりにレンダリングする相対的なものとして定義できます。相対的な配置方法を持つ要素は、CSSの配置プロパティ（左、右、上、下）によって配置されます。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
}
div:first-child {
   position: relative;
   top:20px;
   background-color: orange;
   text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development.................</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">PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます。-

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


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

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

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

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