【後转前要多久】# Day14 CSS -酷东西 (Position: Absolute、Order、Z-Index)

以下这一段程序码会长出不同大小及颜色的四块积木

...
<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
...

div{
    font-size: 50px;
    text-align: center;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
}

成这样的四块肌积木，我想把他全部塞在一起，
也就是让他们由相同的地方长出来

这时後就要用到一种定位(position)的技巧，绝对定位

绝对位置 position: absolute

绝对定位这名词可能会让人误以为：使用了绝对定位，就会定在浏览器上面的某一个地方，
到死元素都会定在那个地方不会动

但并不是如此，
绝对定位只是一种定位方式，要搭配相对定位点才会起作用

可以想像有一只英雄角色，他造出了一个分身，
这只分身会固定在本尊的右侧三公尺旁
当本尊往前移动一段距离时，分身也会同时跟着往前移动一段距离
那我们可以说这个分身 使用的就是绝对定位 (就是跟屁虫啦)
而本尊就是相对定位点

设定绝对定位元素 absolute

召唤分身 -- 跟屁虫之术

position: absolute;

设定相对定位元素 relative

设定相对定位点 (定位本尊的位置)

position: relative;

我们把父层容器设定成relative、并把所有类别都挂上一个absolute
来看看会有什麽变化

.container{
    position: relative;
}

.container{
    position: relative;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
    position: absolute;
}

哇，这次全部的积木果然就从原点(相对定位点)的地方开始长！

那如果只放absolute在A积木身上，并拿掉其他三个积木的absolute，
会发生什麽事情
(由於积木B会被A盖住，我稍微调整一下B的尺寸)

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
}

.b{
    width: 700px;
    height: 300px;
    background: red;
}

这次A方块从原点(最左上方)开始长、B方块也从原点(最左上方)开始长
看的出来，
原本的积木就长原本自己的、而积木A(绝对定位)就长分身的

静态定位 static

原本的就长原本的，意思是static就长static自己的，而不受absolute影响
静态定位(static)是网页预设的定位方式。

position: static;

透过rgba设定透明度的方式，让图层彼此间多少能看的见
再同时让积木A与积木B挂上absolute

.a{
    width: 300px;
    height: 100px;
    background: rgba(245, 222, 179, 0.5);
    position: absolute;
}

.b{
    width: 700px;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.8);
}

.d{
    width: 50px;
    height: 200px;
    background: rgba(138, 43, 226, 1);
    position: static;
}

积木A、B都透过分身的方式，从原点开始长
积木C则是用原本预设static方式，从原点开始依序排、再来才排到积木D

图层堆叠顺序 z-index

• z-index 数字越大盖在越上层
• z-index 可以为负数
• z-index 预设值为0

拿刚刚的绝对定位来展示z-index效果说明

.container{
    position: relative;
}

.a{
    width: 300px;
    height: 100px;
    background: wheat;
    position: absolute;
    z-index: 1;
}

.b{
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
}

.c{
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
}

.d{
    width: 50px;
    height: 200px;
    background: blueviolet;
    position: absolute;
}

先後顺序 order

在 display:flex 或者 display:grid 的情况下，
可以透过CSS中的order属性来改变同层元素间DOM元素显示的先後顺序
改变元素的排列顺序，可以增加排版上的使用弹性
适合用在RWD画面缩小时、变换成手机版元件排版的顺序
(order仅对视觉呈现的顺序产生作用，不会影响元素排列逻辑)

• order数字最小的会先显示出来、数字越大排在越後面
• order可以为负数
• order预设值为0
• order值相同时，会按原先DOM顺序补上

...
<div class="container">
    <p id="p1"> 1 lorem10(按tab)</p>
    <p id="p2"> 2 lorem20(按tab)</p>
    <p id="p3"> 3 lorem50(按tab)</p>
    <p id="p4"> 4 lorem100(按tab)</p>
</div>
...

.container{
    display: flex;
}

p:first-letter{
    font-size: 50px;
}

#p1{

}

#p2{
    order: 0;
}

#p3{
    order: 5;
}

#p4{
    order: -1;
}