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版です。
電子書籍です。