position

CSSについて説明します。

positionについて説明します。

position: static

通常のflowに従って配置されます。
top/bottom/left/rightは、無効となります。
z-indexは、無効となります。

初期値はstaticです。

下記に示すw3cの例では、印刷のときは通常のフローレイアウトにしています。

CSS Positioned Layout Module Level 3

@media screen {
    h1#first { position: fixed }
}
@media print {
    h1#first { position: static }
}

position: relative

通常のflowに従って配置されます。
top/bottom/left/rightは、有効となります。
z-indexは、有効となります。

test_009.css

div.test-009-001
{
    position: static;

    width: 30vw;
    height: 20vh;

    margin: 2%;

    color: #FFFF;
    text-align: center;
    font-variant: small-caps;
    font-family: sans-serif;

    background: repeating-linear-gradient( 85deg, #3399FFCC 0% 8px, #FFFC 0px 40px );
}

div.test-009-002
{
    position: relative;

    left: 10%;
    top: 20%;
    z-index: 2;

    width: 20%;
    height: 50%;

    margin: 2%;

    background: #3399FFCC;
}

div.test-009-003
{
    position: relative;

    bottom: 5%;
    right: 5%;
    z-index: 1;

    width: 20%;
    height: 50%;

    background: #FF9933CC;
}

test_009.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_009.css"/></head>
<body>

<div class="test-009-001">
    <div class="test-009-002">This is relative.</div>
</div>

<div class="test-009-001">
    <div class="test-009-002">This is relative.</div>
    <div class="test-009-003">This is relative.</div>
</div>

</body>

表示は下記となります。

This is relative.
This is relative.
This is relative.

position: absolute

通常のflowから除外されて配置されます。
top/bottom/left/rightは、有効となります。
z-indexは、有効となります。

要素は文書の通常のフローから除外されます。

test_009.css

div.test-009-001
{
    position: static;

    width: 30vw;
    height: 20vh;

    margin: 2%;

    color: #FFFF;
    text-align: center;
    font-variant: small-caps;
    font-family: sans-serif;

    background: repeating-linear-gradient( 85deg, #3399FFCC 0% 8px, #FFFC 0px 40px );
}

div.test-009-004
{
    position: absolute;

    bottom: 5%;
    right: 15%;

    width: 20%;
    height: 20%;

    background: #99CCFFFF;
}

test_009.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_009.css"/></head>
<body>

<div class="test-009-001">
    <div class="test-009-004">This is absolute.</div>
</div>

</body>

表示は下記となります。一番下にあります。

This is absolute.

position: fixed

通常のflowから除外されて配置されます。
top/bottom/left/rightは、有効となります。
z-indexは、有効となります。

要素は文書の通常のフローから除外されます。

test_009.css

div.test-009-001
{
    position: static;

    width: 30vw;
    height: 20vh;

    margin: 2%;

    color: #FFFF;
    text-align: center;
    font-variant: small-caps;
    font-family: sans-serif;

    background: repeating-linear-gradient( 85deg, #3399FFCC 0% 8px, #FFFC 0px 40px );
}

div.test-009-005
{
    position: fixed;

    right: 15%;
    top: 70%;

    width: 20%;
    height: 20%;

    color: #000;

    border: 1px solid #3399FFCC;
}

test_009.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_009.css"/></head>
<body>

<div class="test-009-001">
    <div class="test-009-005">This is fixed.</div>
</div>

</body>

表示は下記となります。ずっと、右下に配置されて表示されています。

This is fixed.

position: sticky

通常のflowに従って配置されます。
top/bottom/left/rightは、有効となります。
z-indexは、有効となります。

test_009.css

div.test-009-006
{
    position: static;

    width: 50vw;
    height: 80vh;

    background: repeating-linear-gradient( 85deg, #3399FFCC 0% 8px, #FFFC 0px 40px );
}

div.test-009-007
{
    position: sticky;

    top: 2%;

    width: 90%;
    height: 7%;

    color: #FFFF;

    background: #3399FFFF;
}

test_009.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_009.css"/></head>
<body>

<div class="test-009-006">
    <div class="test-009-007">This is sticky.</div>
</div>

</body>

表示は下記となります。

This is sticky.

参考 & 広告

Kindle版です。
紙の本と、PDF版があります。
Kindle版です。
電子書籍です。




«       »
カテゴリーCSS