【第2回】CSSの position: absoluteとrelativeのについてWebサイトの記事を参考にやってみた
すとちゃん130といいます。よろしくお願いします。
基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。
※ご質問あればコメント欄にお願いします
書籍『jQuery標準デザイン講座』でモーダルウィンドウの学習中に、使用されているposition: absoluteとrelativeの動作が不明だったため、学習しました。
【やったこと】
①下記の記事を参考に学習
CSSのposition: absoluteとrelativeとは
②上記で子要素にあたるえる影響が疑問になったなため別途調査を実施
【わかったこと】
- absoluteとrelativeの基準位置の違い
- 後続の要素位置に与える影響の違い
- 親要素にposition: absoluteまたはrelativeを指定すると親要素を基準とした位置となること
【補足①】HTMLクイックリファレンスよりpositionのデフォルトは"static"であり、この場合、基準値はウィンドウとなっていること
基礎的なWebの学習をしながら簡単なWebサイトを作ったりしています。せっかくなのでWeb学習をの様子をなるべくに公開するサイトです。
※ご質問あればコメント欄にお願いします
書籍『jQuery標準デザイン講座』でモーダルウィンドウの学習中に、使用されているposition: absoluteとrelativeの動作が不明だったため、学習しました。
【やったこと】
①下記の記事を参考に学習
CSSのposition: absoluteとrelativeとは
②上記で子要素にあたるえる影響が疑問になったなため別途調査を実施
【わかったこと】
- absoluteとrelativeの基準位置の違い
- 後続の要素位置に与える影響の違い
- 親要素にposition: absoluteまたはrelativeを指定すると親要素を基準とした位置となること
【補足①】HTMLクイックリファレンスよりpositionのデフォルトは"static"であり、この場合、基準値はウィンドウとなっていること
- 親要素:static
- 親要素:absolute
- 親要素:relative
- 親要素:fixed
【補足②】この例ではfixedはabsoluteと同じ結果となったが『スクロールしても位置が固定されたまま』となるのが違い
- html
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2<div class="child">child</div></div>
<div class="box3">box3</div>
</body>
- css
.box1{
background-color: blue;
height: 100px;
width: 200px;
}
.box2{
background-color: green;
height: 100px;
width: 200px;
/* position: relative;
top:150px;
left:100px; */
/* position: absolute;
top:150px;
left:100px; */
position: fixed;
top:150px;
left:100px
/* position: static; */
}
.box3{
background-color: yellow;
height: 100px;
width: 200px;
}
.child{
background-color: hotpink;
height: 40px;
width: 60px;
position:absolute;
top:20px;
left:150px;
}
コメント
コメントを投稿