標籤彙整:position

【CSS】z-index

條件

  1. 內元素絕對定位(所有)
  2. 外元素相對定位
  3. 目標元素指定index

※z-index的數值代表優先度。
數字大,表示優先顯示的強度越強(排在前面)
數字小,表示優先顯示的強度越低(隱藏在後面)←反向操作:設負數讓元素被蓋住

範例

沒有設index的情況下,HTML下面的元素會蓋掉上面的元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 

綠色方塊的HTML在上面,藍色方塊的HTML在下面。
所以藍色方塊優先顯示,蓋掉綠色方塊

設定z-index,優先顯示目標元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 
設定index為1,優先顯示綠色方塊

Magic Line

參考範例:CSS-TRICK

ul#nav
 li.current ABOUT
 li.2 STORY
 li INFO
 li TICKETS
 //li#line
ul
 position: relative

li
 display: inline-block
 padding: 0px
 margin-right: 10px
 color: #a3a3a3
 transition-duration: 0.5s
 font-size: 26px
 position: relative
 &:hover
  color: #000
//下底線樣式
#line
 position: absolute
 //初始位置(可以去console帶函數算出來)
 left: 40px
 width: 90px
 border-bottom: 3px solid #000
//加入下底線
$("#nav").append("<li id='line'></li>");

//滑鼠觸發
//hover(移進去的動作, 移出後的動作);
$("li").hover(
 //移入
 function() {
 $("#line").stop().animate({
 left: $(this).position().left,
 width: $(this).width()
 })
 },

 //移出
 function() {
 $("#line").stop().animate({
 left: "40px",
 width: "90px"
 })
 }
);

原生版本

var nav = document.querySelector("#nav");
var createLine = document.createElement("li");
createLine.id = "line";

nav.appendChild(createLine);
var now = document.querySelector("#now");
var li = document.querySelectorAll(".li");
for (i = 0; i < li.length; i++) {
 li[i].addEventListener("mouseover",
 function() {
 createLine.style.left = this.offsetLeft + "px";
 createLine.style.width = this.offsetWidth + "px";
 }
 );
 li[i].addEventListener("mouseout",
 function() {
 createLine.style.left = now.offsetLeft + "px";
 createLine.style.width = now.offsetWidth + "px";
 }
 )
}

Display

Position

Static

    • 預設
    • 無法改動上下左右位置
    • 也無法針對内部元素做定位(進階)
    • 會隨滾輪跑走
<div class="static">static</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.static{
 position: static;
 right: 10px;
}

Display

static

.

 

Relative

  • 相對於static偏移
  • 能夠改動上下左右位置,但是以static基準移動
  • 會隨滾輪跑走
<div class="relative">relative</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.relative{
 position: relative;
 left: 10px;
}

Display

relative

.

Absolute

  • 針對上層框架(通常是body)做定位
  • 可以移動上下左右位置
  • 會隨滾輪跑走
<div class="absolute">absolute</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.absolute{
 position: absolute;
 left: 10px;
}

Display

absolute

.

Fixed

  • 無法針對上層框架做定位,只能針對body定位
  • 可以移動上下左右位置
  • 不隨滾輪跑走
<div class="fixed">fixed</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.fixed{
 position: fixed;
 //fixed要記得設定left/top/right/bottom
 //否則會消失
 left: 10px;
}

Display
can’t be showed up

備註

當單元素position改變時,不影響其他元素定位。
若需要其他元素自動改變定位,則使用margin, padding為佳。

CodePen Example