ホーム > HTML/CSS > position top right bottom leftプロパティ　CSS

position top right bottom leftプロパティ　CSS

なわて投稿サムネイル

ボックスの表示位置を指定するプロパティ

position
top
right
bottom
left

positionプロパティの働き

機能：ボックスの表示位置の基準を指定するプロパティ
初期値：static
承継：なし
適用要素：すべての要素

値 内容
absolute 絶対配置
ブラウザーの左上を基準
親要素の左上を基準（親要素をstatic以外にした場合）
※通常のボックスからはなかったものとして扱われる。
※１枚上のレイヤーに浮いたような状態になる。
※ボックスの大きさはコンテンツの大きさに合わせた幅と高さになる。
※但し、親ボックスの４辺から距離を変更した場合にはボックスの大きさも変動する。
relative 相対配置
通常配置されるべき位置を基準
positionが設定さる前に表示されていた位置の左上が基準
※positionを設定する前に表示されていたスペースはそのまま残る。
fixed 絶対配置
ブラウザーの左上を基準
※通常のボックスからはなかったものとして扱われる。
※１枚上のレイヤーに浮いたような状態になる。
※ボックスの大きさはコンテンツの大きさに合わせた幅と高さになる。
static ボックスの配置方法を指定していなく、規定の配置。

 

top　right　bottom　left　プロパティの働き

機能：positionで指定した基準から距離を指定するプロパティ
初期値：auto
承継：なし
適用要素：positionを指定した要素

値 内容
auto ブラウザーによって自動的に調整
数値+単位 基準の位置からモニターの解像度に応じて数値指定された位置
%値 基準となる親ボックスに対して％値を指定する。

 

position:absolute;

HTML

  1. <h2>position:absolute;なしの場合</h2>
  2. <div class=“oyabox”>
  3. <span class=“koboxA”>子要素ボックスA</span>
  4. <span class=“koboxB”>子要素ボックスB</span>
  5. </div>
  7. <h2>通常のボックスからはボックスAはなかったものとして扱われる<br>ボックスBは、真下に潜り込んでいる。</h2>
  8. <p>子要素ボックスAをマウスおバーすると下の子要素ボックスBが出てきます。</p>
  9. <div id=“oyabox1”>
  10. <span id=“koboxA”>子要素ボックスA</span>
  11. <span class=“koboxB”>子要素ボックスB</span>
  12. </div>
  14. <h2>親ボックスにposition:relative;なし<br>ブラウザー左上が基準</h2>
  15. <div class=“oyabox2”>
  16. <span class=“koboxA”>子要素ボックスA</span>
  17. <span class=“koboxB”>子要素ボックスB</span>
  18. </div>
  20. <h2>親ボックスにposition:relative;あり<br>ボックス左上が基準</h2>
  21. <div class=“oyabox3”>
  22. <span class=“koboxA”>子要素ボックスA</span>
  23. <span class=“koboxB”>子要素ボックスB</span>
  24. </div>

CSS

  1. #koboxA{
  2.       background-color:orange;
  3. }
  4. .koboxA{
  5.       background-color:orange;
  6. }
  7. .koboxB{
  8.       background-color:orange;
  9.       }
  10. /*position:absolute;なしの場合*/
  11. div.oyabox{
  12.       background-color:navajowhite;
  13.       width:300px;
  14.       height:200px;
  15.       margin:20px auto;
  16. }
  17. div.oyabox span.koboxA{
  18.       bottom: 10px;
  19. }
  20. div.oyabox span.koboxB{
  21.       background-color:palegreen;
  22. }
  23. /*ボックスAはなかったものとして扱われる<br>ボックスBは、真下に潜り込んでいる*/
  24. div#oyabox1{
  25.       background-color:navajowhite;
  26.       width:300px;
  27.       height:200px;
  28.       margin:20px auto;
  29. }
  30. div#oyabox1 span#koboxA{
  31.       position: absolute;
  32.   }
  33. div#oyabox1 span.koboxB{
  34.       background-color:palegreen;
  35.   }
  36. /*親ボックスにposition:relative;なし*/
  37. div.oyabox2{
  38.       background-color:navajowhite;
  39.       width:300px;
  40.       height:200px;
  41.       margin:20px auto;
  42. }
  43. div.oyabox2 span.koboxA{
  44.       position: absolute;
  45.       left: 10px;
  46.   }
  47. div.oyabox2 span.koboxB{
  48.       background-color:palegreen;
  49.   }
  51. /*親ボックスにposition:relative;あり*/
  52. div.oyabox3{
  53.       position: relative;
  54.       background-color:navajowhite;
  55.       width:300px;
  56.       height:200px;
  57.       margin:20px auto;
  58. }
  59. div.oyabox3 span.koboxA{
  60.       position: absolute;
  61.       top: 20px;
  62.       left: 10px;
  63.   }
  64. div.oyabox3 span.koboxB{
  65.       background-color:palegreen;
  66.   }

JavaScript

  1. const koboxA = document.getElementById(‘koboxA’);
  3. //ON
  4. koboxA.addEventListener(‘mouseenter’, () => {
  5. 　　koboxA.style.opacity = 0;
  6. }, false);
  8. //OUT
  9. oyabox1.addEventListener(‘mouseleave’, () => {
  10. 　　koboxA.style.opacity = 1;
  12. }, false);

 

See the Pen
position:absolute; by roymoy (@roymoy)
on CodePen.

absoluteの中央寄せ

See the Pen
中央寄せabsolute by roymoy (@roymoy)
on CodePen.

position：relative；

HTML

  1. <h2>position:relativeなしの場合</h2>
  2. <div class=“oyabox”>
  3. <div class=“box1”>box1</div>
  4. <div class=“box2”>box2</div>
  5. <div class=“box3”>box3</div>
  6. </div>
  8. <h2>position:relativeありの場合</h2>
  9. <p>positionが設定さる前に表示されていた位置の左上が基準
  10. </p><p>positionを設定する前に表示されていたスペースはそのまま残る。</p>
  11. <div class=“oyabox2”>
  12. <div class=“box1”>box1</div>
  13. <div class=“box2”>box2</div>
  14. <div class=“box3”>box3</div>
  15. </div>

CSS

  1. .oyabox{
  2.   width:300px;
  3.   height:200px;
  4.   background-color:seashell;
  5.   margin:10px;
  6. }
  7. .oyabox .box1{
  8.   width:150px;
  9.   height:50px;
  10.   background-color:orange;
  11. }
  12. .oyabox .box2{
  13.   width:150px;
  14.   height:50px;
  15.   background-color:olive;
  16.  }
  17. .oyabox .box3{
  18.   width:150px;
  19.   height:50px;
  20.   background-color:brown;
  21. }
  23. .oyabox2{
  24.   width:300px;
  25.   height:200px;
  26.   background-color:ivory;
  27.   margin:10px;
  28. }
  29. .oyabox2 .box1{
  30.   width:150px;
  31.   height:50px;
  32.   background-color:orange;
  33. }
  34. .oyabox2 .box2{
  35.   width:150px;
  36.   height:50px;
  37.   background-color:olive;
  38.   position:relative;
  39.   top:10px;
  40.   left:50px;
  41. }
  42. .oyabox2 .box3{
  43.   width:150px;
  44.   height:50px;
  45.   background-color:brown;
  46. }

 

See the Pen
position:relative; by roymoy (@roymoy)
on CodePen.

position：fixed；

HTML

  1. <header>ヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキスト</header>
  2.   <div>コンテンツテキストコンテンツテキストコンテンツテキストコンテンツテキスト</div>

 

CSS

  1. header{
  2.   position:fixed;
  3.   top:0;
  4.   left:0;
  5.   background-color:olive;
  6.   width:100%;
  7.   text-align:center;
  8. }
  9. div{
  10.   background-color:orange;
  11.   margin:24px auto;
  12.   width:400px;
  13. }

 

See the Pen
position:fixed; by roymoy (@roymoy)
on CodePen.

スポンサードリンク

スポンサードリンク