CSSでのposition属性の用途は何ですか-CSSチュートリアル-php.cn

CSSでのposition属性の用途は何ですか

王林

リリース： 2020-03-16 10:42:23

転載

3739 人が閲覧しました

CSSでのposition属性の用途は何ですか

position 属性

position 属性は、要素に使用される配置方法のタイプ (静的、相対、固定、絶対、またはスティッキー) を指定します。）。 5 つの異なる値があります:

•static
•relative
•fixed
•absolute
•sticky

次に、top、bottom、The を使用します。 left 属性と right 属性は要素を配置します。ただし、position プロパティが最初に設定されない限り、これらのプロパティは効果がありません。また、位置の値に応じて動作も異なります。

position:static;

デフォルトでは、HTML 要素は静的に配置されます。静的に配置された要素は、上、下、左、右の属性の影響を受けません。要素position:static; は特別な方法で配置されるのではなく、常にページの通常のフローに従って配置されます:

(推奨チュートリアル: CSS Getting Started Tutorial)

This< ;div> 要素のposition:static;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css</title>
    <style>
        div.static {
            position: static;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: static;</h2>
<p>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p>
<div class="static">
    这个div元素的位置为：static;
</div>
</body>
</html>

ログイン後にコピー

position:relative;

通常の位置を基準にして配置されたposition:relative;を持つ要素。相対的に配置された要素の上、下、左、右のプロパティを設定すると、要素は通常の位置から調整されます。他のコンテンツは、要素によって残された空白に合わせて調整されません。

この

要素の位置: 相対;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css</title>
    <style>
        div.relative {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: relative;</h2>
<p>position:relative的元素; 相对于其正常位置定位：</p>
<div class="relative">
    这个div元素有position: relative;
</div>
</body>
</html>

ログイン後にコピー

position:fixed;

要素の位置:fixed;は相対的に配置されますつまり、ページがスクロールしても常に同じ位置に留まります。 top、bottom、left、right 属性は要素を配置するために使用されます。固定要素は、ページ内に通常存在する隙間を残しません。ページの右下隅にある固定要素に注目してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css教程（jc2182.com）</title>
    <style>
        div.fixed {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 300px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position:fixed;</h2>
<p>position:fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：</p>
<div class="fixed">
    这个div元素有position: fixed;
</div>
</body>
</html>

ログイン後にコピー

position:absolute;

position:absolute; を持つ要素は、(fixed のようにビューポートを基準にして配置されるのではなく) 直前に配置された祖先を基準にして配置されます。）。ただし、絶対配置された要素に配置された祖先がない場合、その要素はドキュメント本文を使用し、ページのスクロールとともに移動します。注: 「位置決めされた」要素の位置は、静的要素を除く任意の要素です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css教程（jc2182.com）</title>
    <style>
        div.relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }
        div.absolute {
            position: absolute;
            top: 80px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>
<h2>position: absolute;</h2>
<p>position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：</p>
<div class="relative">这个div元素有 position: relative;
    <div class="absolute">这个div元素有 position: absolute;</div>
</div>
</body>
</html>

ログイン後にコピー

position:sticky;

position:sticky;ユーザーのスクロール位置に基づいて要素を配置します。スティッキー要素は、スクロール位置に応じて相対と固定の間で切り替わります。ビューポート内で指定されたオフセット位置に一致するまで、相対的に配置されます。その後、その位置に「固定」されます (position:fixed のように)。

注: Internet Explorer、Edge 15 以前のバージョンでは、固定配置はサポートされていません。 Safari には -webkit- プレフィックスが必要です (以下の例を参照)。また、固定配置を機能させるには、上、右、下、左の少なくとも 1 つを指定する必要があります。

この例では、top: 0 で、スクロール位置に到達するとスティッキー要素がページの上部に固定されます。

<!DOCTYPE html>
<html>
<head>
    <style>
        div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }
    </style>
</head>
<body>
<p>尝试在此框架内<b>滚动</b>以了解粘性定位的工作原理。</p>
<p>注意：IE/Edge15及更早版本不支position: sticky;。</p>
<div class="sticky">我很粘!</div>
<div style="padding-bottom:2000px">
    <p>在此示例中，当您到达其滚动位置时，粘性元素会粘到页面顶部（顶部：0）。</p>
    <p>向上滚动以消除粘性。</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>

ログイン後にコピー

推奨される関連ビデオチュートリアル: css ビデオチュートリアル

以上がCSSでのposition属性の用途は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。