CSS é…置関連:position属性

概è¦

値 機能
static 基準設定無ã—(è¦å®š)
absolute 絶対ä½ç½®é…ç½®
relative 相対ä½ç½®é…ç½®
fixed 絶対ä½ç½®é…置。スクロールã—ã¦ã‚‚ä½ç½®ãŒå›ºå®š

potision: absolute;

絶対ä½ç½®é…ç½®
親ボックス : static以外(absolute,relative,fixed)
å­ãƒœãƒƒã‚¯ã‚¹ : absolute
⇒親ボックスã‹ã‚‰ã®è·é›¢ã‚’top,left,right,bottomã§æŒ‡å®šã€‚
親ボックス : static
å­ãƒœãƒƒã‚¯ã‚¹ : absolute
⇒<body>ã‹ã‚‰ã®è·é›¢ã‚’top,left,right,bottomã§æŒ‡å®šã€‚

共通スタイル

<style type="text/css" >
  .parent {
    width: 100px;
    height: 100px;
    border: 1px solid #888;
  }
  .child {
    width: 50px;
    height: 50px;
    border: 1px solid gray;
  }
</style>

↓基準(paernt1ã®top)

parent1

child1

<div id="parent1" class="parent">
  parent1
  <div id="child1" class="child">
    child1
  </div>
</div>
<style type="text/css" >
  #parent1 {
    position: relative;
  }
  #child1 {
    position: absolute;
    top: 80px;
    left: 20px;
    parent1ã®top,leftã‹ã‚‰ã®è·é›¢ã‚’指定
  }
</style>

parent2

child2

↑基準(parent2ã®bottom)

<div id="parent2" class="parent">
  parent2
  <div id="child2" class="child">
    child2
  </div>
</div>
<style type="text/css" >
  #parent2 {
    position: relative;
  }
  #child2 {
    position: absolute;
    bottom: 100px;
    parent2ã®bottomã‹ã‚‰ã®è·é›¢ã‚’指定(-100px上ã«é…ç½®ã•れる)
  }
</style>

ã“ã“ã«child4ã€child4ã®è¦ªã‚¿ã‚°ã‚’記述
<div style="position: relative;">

     â†ä¸‹ã®æ–¹ã§é…ç½®ã—ãŸãƒœãƒƒã‚¯ã‚¹(child3)。
     â†ä¸‹ã®æ–¹ã§é…ç½®ã—ãŸãƒœãƒƒã‚¯ã‚¹(child4)。

(上部å‚ç…§)

parent3

child3

<div id="parent3" class="parent">
  parent3
  <div id="child3" class="child">
    child3
  </div>
</div>
<style type="text/css" >
  #parent3 {
    position: static;
  }
  #child3 {
    position: absolute;
    top: 0px;
    親ボックス(ãªã‘れã°<body>)ã®topã‹ã‚‰ã®è·é›¢ã‚’指定
    position: staticã®è¦ªã¯ç„¡è¦–ã•れる?
  }
</style>

親を指定ã—ãªã„å ´åˆ
(上部å‚ç…§)

child4

<div id="child4" class="child">
  child4
</div>
<style type="text/css" >
  #child4 {
    position: absolute;
    top: 80px;
    親を指定ã—ãªã„å ´åˆï¼šè¦ªï¼<body>
    親ボックス(ãªã‘れã°<body>)ã®topã‹ã‚‰ã®è·é›¢ã‚’指定ã™ã‚‹ã®ã¨åŒã˜
  }
</style>

potision: relative;

相対ä½ç½®é…ç½®
親ボックス : static以外(absolute,relative,fixed)
å­ãƒœãƒƒã‚¯ã‚¹ : relative
⇒親ボックスã‹ã‚‰ã®è·é›¢ã‚’top,left,right,bottomã§æŒ‡å®šã€‚
 å­ãƒœãƒƒã‚¯ã‚¹ã®å…ƒã‚¹ãƒšãƒ¼ã‚¹ã¯æ®‹ã‚‹

parent5

child5

aaa
aaa

<div id="parent5" class="parent">
  parent5
  <div id="child5" class="child">
    child5
  </div>
  aaa<br/>
  aaa<br/>
</div>
<style type="text/css" >
  #parent5 {
    position: relative;
  }
  #child5 {
    position: relative;
    top: 0px;
    left: 70px;
    parent5ã¨ã„ã†æ–‡å­—ã®ä¸‹éƒ¨ã‹ã‚‰ã®è·é›¢ã‚’指定
  }
</style>

parent6

child6
å…ƒä½ç½®

aaa
aaa

<div id="parent6" class="parent">
  parent6
  <div id="child6" class="child">
    child6
  </div>
  aaa<br/>
  aaa<br/>
</div>
<style type="text/css" >
  #parent6 {
    position: relative;
  }
  #child6 {
    position: relative;
    top: 50px;
    left: 70px;
    parent6ã¨ã„ã†æ–‡å­—ã®ä¸‹éƒ¨ã‹ã‚‰ã®è·é›¢ã‚’指定
    対象(child6)ãŒç§»å‹•ã—ã¦ã‚‚ã€å…ƒã®ä½ç½®ã®ãƒœãƒƒã‚¯ã‚¹åˆ†ã‚¹ãƒšãƒ¼ã‚¹ãŒç©ºã
  }
</style>

parent7

child7-1
child7-2
å…ƒä½ç½®
å…ƒä½ç½®

aaa
aaa

<div id="parent7" class="parent">
  parent7
  <div id="child7" class="child">
    child7-1
  </div>
  <div id="child7" class="child">
    child7-2
  </div>
  aaa<br/>
  aaa<br/>
</div>
<style type="text/css" >
  #parent7 {
    position: relative;
  }
  #child7-1 {
    position: relative;
    top: 50px;
    left: 70px;
  }
  #child7-2 {
    position: relative;
    top: 30px;
    left: 130px;
  }
</style>

potision: fixed

絶対ä½ç½®é…置。スクロールã—ã¦ã‚‚ä½ç½®ãŒå›ºå®š
⇒親ボックス(<body>)ã‹ã‚‰ã®è·é›¢ã‚’top,left,right,bottomã§æŒ‡å®šã€‚
ページ上部å‚ç…§

child9

<div id="child9" class="child">
  child9
</div>
<style type="text/css" >
  #child9 {
    position: fixed;
    top: 30px;
    right: 10px;
  }
</style>

Follow me!