HTML & CSS - Layout

HTML&CSSのレイアウト機能を検討する

position(相対、絶対、fixed)、inline、inline-block、block、floatなどについて...**

####[HTML FILE]####

<link rel="stylesheet" href="style.css">

<secion>static</br>

<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>

<br>relative</br>

<span class="top">top</span>
<span class="right">right</span>
<span class="bottom">bottom</span>
<div class="left">left</div>

<br>absolute</br>

<div>
    <div id="absolute">absolute</div>
  </div>
  <div id="parent">
    <div id="child">children</div>
  </div>

<br>fixed</br>

<div>
    <div id="fixed">fixed</div>
</div>

####[CSS FILE]####

br {
    font-size: 50px;
}

span, div {
    background: skyblue;
  }

  span, div {
    background: skyblue;
  }
  
  .top {
    position: relative;
    top: 5px;
    z-index: 1;
  }
  
  .right {
    position: relative;
    right: 5px;
  }
  
  .bottom {
    position: relative;
    bottom: 5px;
  }
  
  .left {
    position: relative;
    left: 5px;
  }

  #absolute {
    background: skyblue;
    position: absolute;
    right: 0;
  }
  
  #parent {
    position: relative;
    width: 100px;
    height: 100px;
    background: skyblue;
  }
  
  #child {
    position: absolute;
    right: 0;
  }

  #fixed {
    background: skyblue;
    position: fixed;
    right: 20;
  }