位置(position)

指定元素在父元素定位方式

• Static預設值

照原始位置顯示

.box {
    width: 250px;
    height: 250px;
}
.box1 {
    background-color: red;
    width: 100px;
    height: 100px;
    top: 60px;
    left: 40px;
    position: static;
}
.box2 {
    background-color: yellow;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
}
.box3 {
    background-color: green;
    width: 100px;
    height: 100px;
    top: 70px;
    left: 30px;
}

• fixed

將元素固定在瀏覽器視窗中，即使滾動條移動也會保持在同一位置

box {
  width: 250px;
  height: 250px;
}
.box1 {
  background-color: red;
  width: 100px;
  height: 100px;
  top: 60px;
  left: 40px;
  position: fixed;
}
.box2 {
  background-color: yellow;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
  width: 100px;
  height: 100px;
  top: 70px;
  left: 30px;
}

• sticky

將元素固定在父元素中，滾動條移動到元素之前會固定在原始位置

.box {
  width: 250px;
  height: 250px;
}
.box1 {
  background-color: red;
  width: 100px;
  height: 100px;
  top: 60px;
  left: 40px;
}
.box2 {
  background-color: yellow;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  position: sticky;
}
.box3 {
  background-color: green;
  width: 100px;
  height: 100px;
  top: 70px;
  left: 30px;
}

• Absolute絕對位置

會相對於最近父元素或瀏覽器視窗進行定位

.box {
    width: 250px;
    height: 250px;
}
.box1 {
    background-color: red;
    width: 100px;
    height: 100px;
    top: 60px;
    left: 40px;
}
.box2 {
    background-color: yellow;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    position: absolute;
}
.box3 {
    background-color: green;
    width: 100px;
    height: 100px;
    top: 70px;
    left: 30px;
    position: absolute;
}

• Relative相對位置

會相對於原始位置進行定位

.box {
    width: 250px;
    height: 250px;
}
.box1 {
    background-color: red;
    width: 100px;
    height: 100px;
    top: 60px;
    left: 40px;
    position: relative;
}
.box2 {
    background-color: yellow;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
}
.box3 {
    background-color: green;
    width: 100px;
    height: 100px;
    top: 70px;
    left: 30px;
    position: relative;
}

• z-index

控制元素在Z軸上堆疊順序，屬性值越大，元素越靠近

.redbox {
  position: relative;
  z-index: 1;
  background-color: red;
  height: 5em;
}
.greenbox {
  position: absolute;
  z-index: 3; 
  background-color: green;
  width: 50%;
  left: 65%;
  top: 25px;
  height: 10em;
}

.yellowbox {
  position: absolute;
  z-index: 2; 
  background-color: yellow;
  width: 100%;
  left: 100px;
  top: 3em;
}

• overflow

控制元素內容是否溢出元素邊框

• visible(默認值)：元素內容會顯示，即使溢出元素邊框
• hidden：元素內容會被裁剪，適合元素邊框
• scroll：元素出現一個滾軸，溢出的內容
  

浮動(float)

元素從標準中移除，懸浮在其他元素周圍

• left(默認值)：元素向左浮動
• right：元素向右浮動
• none：元素恢復標準中

.container {
    width: 200px;
    height: 200px;
  }
  .redbox {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
   
  }
  .greenbox {
    width: 150px;
    height: 150px;
    background-color: green;
    float: none;
  }
  .yellowbox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right;
  }

清除(clear)

清除浮動元素周圍元素

• left：清除左側浮動元素
• right：清除右側浮動元素
• both：清除左右兩側浮動元素
• none：不清除任何浮動元素

.container {
    width: 200px;
    height: 200px;
  } 
  .redbox {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left; 
  }
  .greenbox {
    width: 150px;
    height: 150px;
    background-color: green;
    float: none;
    clear: both;
  }
  .yellowbox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right;
  }

  .yellowbox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right;
    clear: both;
  }

資料來源:CSS語法
overflow
z-index