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)
<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ã®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;">
     â†ä¸‹ã®æ–¹ã§é…ç½®ã—ãŸãƒœãƒƒã‚¯ã‚¹(child4)。
(上部å‚ç…§)
<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>
親を指定ã—ãªã„å ´åˆ
(上部å‚ç…§)
<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ã§æŒ‡å®šã€‚
 åボックスã®å…ƒã‚¹ãƒšãƒ¼ã‚¹ã¯æ®‹ã‚‹
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>
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>
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ã§æŒ‡å®šã€‚
ページ上部å‚ç…§
<div id="child9" class="child">
  child9
</div>
<style type="text/css" >
  #child9 {
    position: fixed;
    top: 30px;
    right: 10px;
  }
</style>