Day 4 : HTML – 别动！你就停在那里！CSS position定位属性是什麽？

这里想和大家介绍一下CSS position到底是什麽
以防大家和我一样干了蠢事 (详情可看Day 2)

position是一个定位属性，你想要它定位在哪，它就会在那一动也不动
就跟当兵一样，班长叫你罚站你就罚站 (误
如果没有用position，就没办法使用top、bottom、left、right控制元素 (很重要!!!)

Position大致上分成5种:

static (预设定位)
relative (相对定位)
absolute (绝对定位)
fixed (固定定位)
sticky (滚动式沾黏定位)

那到底该怎麽使用它们呢？
别急，莫荒莫害怕！让我和各位娓娓道来

1. Static (预设定位)
Static不会被「指定」定位在某个地方，而是照着页面预设的宽度自动排版
它也不受top、bottom、left、right的控制
但如果在前面加上margin、padding是可以的喔！(ex：margin-top、padding-left)

让我们看以下范例

HTML:

<div class="position_static font">
    <p>static：今天天气晴，是个适合烤肉的好日子R～</p>
</div>

CSS:

.font {
    padding-left:3%;
    font-size:30px;
}
.position_static {
    position:static;
    border:solid 5px rgb(117, 175, 24);
    height:150px;
}

结果如下图所示:

2. relative (相对定位)
relative本质上和static是一样的，但差异在於它可以受top、bottom、left、right控制
所以如果你没有给它额外的属性控制，它就会看起来和static一模一样

让我们看以下范例

HTML:

<div class="position_relative box_1 font">
    <p>relative_box_1：今天天气晴，是个适合烤肉的好日子R～</p>
</div>
 <div class="position_relative box_2 font">
     <p>relative_box_2：今天天气晴，是个适合烤肉的好日子R～</p>
 </div>
<div class="position_relative box_3 font">
    <p>relative_box_3：今天天气晴，是个适合烤肉的好日子R～</p>
</div>

CSS:

.position_relative{
    position:relative;
    border:solid 5px rgb(117, 175, 24);
    height:150px;
    margin:1% auto;
}

结果如下图所示:

那我如果在box_2加上一些属性去控制它

CSS:

.box_2 {
    top:50px;
    left:5%;
}

它就会依照原本的位置「相对地」偏移

3. absolute (绝对定位)
absolute在position是一个很有趣的东西
它会依据「上层容器」去定位，且那个容器要有设置relative
如果设置static，它会直接依<body></body>去定位

因为static是「不可定位元素」，而absolute的上层必须是「可定位元素」(很重要!!!)
所以通常都会在absolute外面再包一层relative
再用top、bottom、left、right控制

让我们看以下范例

HTML:

<div class="position_relative_container font">
    <p>relative：今天天气晴，是个适合烤肉的好日子R～</p>
    <div class="position_absolute font">
        <p>absolute：今天天气晴，是个适合烤肉的好日子R～</p>
    </div>
</div>

CSS:

.position_relative_container {
    position:relative;
    border:solid 5px rgb(117, 175, 24);
    width:800px;
    height:600px;
}
.position_absolute {
    position:absolute;
    border:solid 5px rgb(233, 91, 48);
    width:350px;
    height:175px;
    right:0;
    bottom:125px;
}

结果如下图所示:

4. fixed (固定定位)
fixed它会依照你浏览器视窗去定位
所以不管你页面滚动到哪，它都会阴魂不散的，定在那一动也不动

让我们看以下范例

HTML:

<div class="position_fixed font">
    <p>fixed：今天天气晴，是个适合烤肉的好日子R～</p>
</div>

CSS:

.position_fixed {
    position:fixed;
    border:solid 5px rgb(117, 175, 24);
    height:200px;
    right:0;
    bottom:0;
}

结果如下图所示:

5. sticky (滚动式沾黏定位)
sticky和fixed有点相似，但又不太像
sticky要视窗滚动至「超过它」才会起作用，没有超过就会和一般的box一样

记得要设置top，设置其他的(bottem、left、right)都不会起作用 (很重要!!!)
可以把它想像成便利贴，只有最上面有黏性，其余地方都是悬空的

让我们看以下范例

HTML:

<div class="box font">
    <p>box_1：今天天气晴，是个适合烤肉的好日子R～</p>
</div>
<div class="position_sticky font">
    <p>sticky：今天天气晴，是个适合烤肉的好日子R～</p>
<div>
<div class="box font">
    <p>box_2：今天天气晴，是个适合烤肉的好日子R～</p>
</div>
<div class="box font">
    <p>box_3：今天天气晴，是个适合烤肉的好日子R～</p>
</div>
<div class="box font">
    <p>box_4：今天天气晴，是个适合烤肉的好日子R～</p>
</div>

CSS:

.box {
    border:solid 5px rgb(117, 175, 24);
    height:250px;
    margin:2% auto;
}
.position_sticky {
    position:sticky;
    border:solid 5px rgb(233, 91, 48);
    height:175px;
    top:20px;
}

在还没滚动前长这样