カテゴリー:
position
閲覧数:672 配信日:2018-01-17 09:53
例1.
共通HTML
<header></header>
<main>
<p id="red"></p>
<div id="blue"></div>
</main>
例1-1.position:static;
・対象要素blue(青色)が現在配置されている場所は、『「positionを指定していない状態の要素」が配置された位置の左上』地点に基づいている
<style>
header{
margin:20px;
height:525px;
padding:5px;
background-color: GREEN;
}
main{
margin:50px;
width:900px;
height:100px;
padding:10px;
background-color: GRAY;
}
#red{
float:left;
width:50px;
height:50px;
background-color:RED;
}
#blue{
position:static;
float:left;
width:800px;
height:50px;
background-color: BLUE;
}
</style>
例1-2.position:absolute;親要素のposition:static;
・「position:absolute;」指定しているけれども、「top」「left」プロパティを指定していないケース
・圧倒的に分かりづらい
・しかも、「position:absolute;」と「float」の組み合わせは、また別の問題を孕んでいる
・Float right and position absolute doesn't work together
・CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
<style>
header{
margin:20px;
height:525px;
padding:5px;
background-color: GREEN;
}
main{
position:static;
margin:50px;
width:900px;
height:100px;
padding:10px;
background-color: GRAY;
}
#red{
float:left;
width:50px;
height:50px;
background-color:RED;
}
#blue{
position:absolute;
float:left;
width:800px;
height:50px;
background-color: BLUE;
}
</style>
