カテゴリー:
position
閲覧数:514 配信日: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> |
