カテゴリー:
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> |
