読者です 読者をやめる 読者になる 読者になる

position:absoluteで親要素から相対位置で表示したいとき

CSS

css

#hoge {
    position:relative;
}
#foo {
    position:absolute;
        top:0px;
        left:100px;
}

html

<div id="hoge">
    <div id="foo">
            ababababab
     </div>
</div>

親要素にposition:relativeを設定することにより子要素のposition:absoluteが親要素を始点とする
本来position:absoluteの始点は画面左上となるため解像度によってずれる可能性が高い

  • 親要素のrelativeの値は特に設定しなくてもいいみたい
  • 子要素ではtopとleftを指定したほうがよい
    • top:0pxとしないとIE6で下方向にややずれた(デフォルト値があるのかな)
  • position:absoluteはでも極力使いたくない
  • widthとかheightとか表示に関する物は省略した