Learn_CSS_CLS3_tryPosition

for Learning book demo use

by Loki Jiang

HTML

<!-- div.bigbox>div.box{$}*20 -->
<div class="main">
  <div class="bigbox">
    <div class="box">01</div>
    <div class="box">02</div>
    <div class="box">03</div>
    <div class="box">04</div>
    <div class="box">05</div>
    <div class="box">06</div>
    <div class="box relative">07</div>
    <div class="box">08</div>
    <div class="box">09</div>
    <div class="box absolute">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
    <div class="box">15</div>
    <div class="box">16</div>
    <div class="box flexd">17</div>
    <div class="box">18</div>
    <div class="box">19</div>
    <div class="box">20</div>
  </div>
</div>

CSS

body {
  margin: 50px;
  padding: 50px;
  background: #ccc;
  border: 1px solid #ff0;

  /* flexbox效果，使內容居中心 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 204px);
}
.main {
  padding: 100px;
  background: #aaa;
  border: 1px solid #f00;
}
.bigbox {
  width: 300px;
  border: 1px solid #000;
  background: rgb(209, 248, 248);

  /* method1 */
  font-size: 0;

  /* method2 */
  /* overflow: hidden; */
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  color: white;
  background-color: darkcyan;
  text-align: center;
  line-height: 50px;

  /* method1 */
  display: inline-block;
  font-size: 1rem;

  /* method2 *//* 空間仍在僅偏移 */
  /* display: block;
  float: left; */

  /* position: relative; */
}

.relative {
  position: relative;
  background: brown;
  top: -30px;
  left: -30px;
  /* 空間仍在僅偏移 */
}

.absolute {
  position: absolute;
  background: blueviolet;
  /* 預設位置不變，父容器失去該元素 */
}

.flexd {
  position: fixed;
  background: darkgreen;
  /* 解讀奇怪的預設位置 =>
    1. 因為inline-block關係，會緊鄰前者旁邊
    2. 失去父容器的強迫換行，所以overflow
  */
}