親要素のpositionプロパティの設定の違いによる position:absolute の動作の違い - CSS
親要素のpositionプロパティの設定の違いによる position:absolute の動作の違いを紹介します。
概要
要素の子要素にposition:absoluteを指定した要素がある場合、親要素のpositionプロパティの設定により、
表示位置、座標の扱いが変わります。この記事では、親要素のpositionプロパティの設定ごとに position:absolute の子要素が
どのような表示動作になるかを紹介します。
親要素が position:static の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="absolute-in-static.css" />
</head>
<body>
<div class="pageFrame">
<div class="baseFrame">
<div id="ContentFrame1">1</div>
<div id="ContentFrame2">2</div>
<div id="ContentFrame3">3</div>
</div>
</div>
</body>
</html>
body {
background-color: #C0C0C0;
}
.pageFrame {
margin-left:5rem;
margin-right:5rem;
}
.baseFrame {
position:static;
width: 640px;
height: 400px;
background-color: #FFFFFF;
}
#ContentFrame1 {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
background-color: #1995ee;
}
#ContentFrame2 {
position: absolute;
top: 260px;
left: 120px;
width: 48px;
height: 48px;
background-color: #ff6a00;
}
#ContentFrame3 {
position: absolute;
top: 120px;
left: 520px;
width: 48px;
height: 48px;
background-color: #ffd800;
}
解説
class="baseFrame" の枠内に
id="ContentFrame1" id="ContentFrame2" id="ContentFrame3" の3つの枠を配置しています。
baseFrameの枠は
position:static を指定し内部の
ContentFrame1~3 の枠には
position:absolute を指定しています。
この状態での表示を確認します。
表示結果
上記のページを表示すると下図の画面が表示されます。
top:0, left:0 を指定した要素がページの左上に表示されており、親要素の左上ではないことがわかります。
親要素が
position:staticの場合は、子要素はページの絶対座標の位置で表示されます。
親要素が position:relative の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="absolute-in-relative.css" />
</head>
<body>
<div class="pageFrame">
<div class="baseFrame">
<div id="ContentFrame1">1</div>
<div id="ContentFrame2">2</div>
<div id="ContentFrame3">3</div>
</div>
</div>
</body>
</html>
body {
background-color: #C0C0C0;
}
.pageFrame {
margin-left:5rem;
margin-right:5rem;
}
.baseFrame {
position:relative;
width: 640px;
height: 400px;
background-color: #FFFFFF;
}
#ContentFrame1 {
position: absolute;
top: 0;
left: 0;
width:48px;
height:48px;
background-color: #1995ee;
}
#ContentFrame2 {
position: absolute;
top: 260px;
left: 120px;
width: 48px;
height: 48px;
background-color: #ff6a00;
}
#ContentFrame3 {
position: absolute;
top: 120px;
left: 520px;
width: 48px;
height: 48px;
background-color: #ffd800;
}
表示結果
上記のページを表示すると下図の画面が表示されます。
top:0, left:0 を指定した要素が親要素の左上に表示されており、ページの絶対座標ではないことがわかります。
親要素が
position:relativeの場合は、子要素は親要素の座標の位置で表示されます。
親要素が position:absolute の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="absolute-in-absolute.css" />
</head>
<body>
<div class="pageFrame">
<div class="baseFrame">
<div id="ContentFrame1">1</div>
<div id="ContentFrame2">2</div>
<div id="ContentFrame3">3</div>
</div>
</div>
</body>
</html>
body {
background-color: #C0C0C0;
}
.pageFrame {
margin-left:5rem;
margin-right:5rem;
}
.baseFrame {
position:absolute;
width: 640px;
height: 400px;
background-color: #FFFFFF;
}
#ContentFrame1 {
position: absolute;
top: 0;
left: 0;
width:48px;
height:48px;
background-color: #1995ee;
}
#ContentFrame2 {
position: absolute;
top: 260px;
left: 120px;
width: 48px;
height: 48px;
background-color: #ff6a00;
}
#ContentFrame3 {
position: absolute;
top: 120px;
left: 520px;
width: 48px;
height: 48px;
background-color: #ffd800;
}
表示結果
上記のページを表示すると下図の画面が表示されます。
親要素が
position:absoluteの場合は親要素が
position:relative と同じ表示結果になります。
親要素が position:fixed の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="absolute-in-fixed.css" />
</head>
<body>
<div class="pageFrame">
<div class="baseFrame">
<div id="ContentFrame1">1</div>
<div id="ContentFrame2">2</div>
<div id="ContentFrame3">3</div>
</div>
</div>
</body>
</html>
body {
background-color: #C0C0C0;
}
.pageFrame {
margin-left:5rem;
margin-right:5rem;
}
.baseFrame {
position:fixed;
width: 640px;
height: 400px;
background-color: #FFFFFF;
}
#ContentFrame1 {
position: absolute;
top: 0;
left: 0;
width:48px;
height:48px;
background-color: #1995ee;
}
#ContentFrame2 {
position: absolute;
top: 260px;
left: 120px;
width: 48px;
height: 48px;
background-color: #ff6a00;
}
#ContentFrame3 {
position: absolute;
top: 120px;
left: 520px;
width: 48px;
height: 48px;
background-color: #ffd800;
}
表示結果
上記のページを表示すると下図の画面が表示されます。
親要素が
position:fixedの場合は親要素が
position:relative position:absolute と同じ表示結果になります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
