CSS 配置レイアウトとはどういう意味ですか?-フロントエンドQ&A-php.cn

CSS 配置レイアウトとはどういう意味ですか?

WBOY

リリース： 2022-04-20 10:50:42

オリジナル

2334 人が閲覧しました

CSS における配置レイアウトとは、要素を元の位置から分離してページ上の任意の位置に配置できる方法を指します。配置レイアウトは、静的配置 (static)、絶対配置 (absolute)、相対位置決め (relative)、固定位置決め (fixed)、およびスティッキー位置決め (sticky) の 5 つの位置決め方法。

CSS 配置レイアウトとはどういう意味ですか?

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css配置レイアウトの意味

CSSレイアウトの配置レイアウト配置レイアウト(Position)とは、要素を元の位置から切り離してページ上の任意の位置に配置できることを意味します。

位置、左、右、上、下を使用して、要素を通常のレイアウトフローから飛び出してページ上の特定の位置に固定するなど、要素の既存の位置を変更できます。。

CSS でのレイアウトの配置は、静的、相対、絶対、固定、スティッキーレイアウトに分かれています

一、position: static; (静的レイアウト)

#HTML 要素のデフォルトの位置は静的です。デフォルトの位置はドキュメントフロー内です。position: static の要素は、スタイルが左、右、下、上の影響を受けません。特殊な位置決め方法により通常のフロー内で位置が変わることはありません。

例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSS 配置レイアウトとはどういう意味ですか?

2.位置: 相対; (相対位置決め)

相対位置決めは、元の標準フロー内の位置を基準にして要素を左、右、下に移動することです。、上部の属性を調整します。

注:

相対位置に設定された要素はドキュメントフローから切り離されません。つまり、インライン要素が区別されます。ブロックレベルの要素。/Inline ブロック要素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

ログイン後にコピー

出力結果:

CSS 配置レイアウトとはどういう意味ですか? ##3.position:Absolute;(絶対位置決め)

#絶対配置の基準点

デフォルトでは、祖先要素に関係なく、ボディが基準点として使用されます。

#ただし、祖先要素に配置フロー要素がある場合 (絶対/相対/固定配置を使用)、その要素が参照点になります。
その祖先要素に複数の位置決めフロー要素が含まれている場合は、最も近い位置決めフロー要素を参照点として選択します
注意事項

絶対に配置された要素はドキュメントフローの外です

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>

ログイン後にコピー

出力結果:

4. 位置: 固定;(固定位置)

CSS 配置レイアウトとはどういう意味ですか? 固定位置の要素はビューポートを基準にして配置されます。スクロールバーはスクロールすると常にビューポートの位置にあり、その位置は左、右、下、上の属性によって調整されます。

#修正済み配置された要素はドキュメントフローの外です

絶対配置と同様に、インライン要素/ブロックレベル要素/インラインブロック要素は区別されません

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

ログイン後にコピー

出力結果:

##5. 位置: Sticky ; (スティッキー配置)

この配置は、相対配置と固定配置を組み合わせたものです。相対配置によって特定の位置に配置されます。ビューポートがこの位置に到達すると、固定されます。例: set top :50px、その後、スティッキー要素が相対距離に達すると、配置された要素の上部 50px の位置が固定され、上方向に移動しなくなります (これは固定配置と同等です)。

注

CSS 配置レイアウトとはどういう意味ですか? スティッキー配置された要素はドキュメントフローから切り離されません

位置を設定: スティッキー; と 1 を指定しますof (left、right、bottom、top) can

条件の使用

親要素を overflow:hidden または overflow:auto 属性にすることはできません。
#上、下、左、右の 4 つの値のいずれかを指定する必要があります。指定しない場合は、相対位置のみになります。

親要素の高さを低くすることはできませんスティッキー要素の高さに基づきます

スティッキー要素は親要素内でのみ有効です

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
</body>
</html>

ログイン後にコピー

输出结果：

CSS 配置レイアウトとはどういう意味ですか?