回上頁 - 網頁HTML+CSS語法

004、DIV正方形製作，設定absolute位置和z-index堆疊

第1部份、設定5行DIV標籤

<div class="square" id="s1">1</div>
<div class="square" id="s2">2</div>
<div class="square" id="s3">3</div>
<div class="square" id="s4">4</div>
<div class="square" id="s5">5</div>

1
2
3
4
5

 

第2部份、設定CSS的 square 類別名稱，製作正方形

<style type="text/css">

.square{
    width: 100px;
    height: 100px;
    background-color: gray;
}

</style>

1
2
3
4
5

 

第3部份、設定元件位置(定位) position

<style type="text/css">

.square{
    position: absolute;         /*加入這行*/
    width: 100px;
    height: 100px;
    background-color: gray;
}

</style>

1
2
3
4
5

 

第4部份、設定top與left設定值，還有背景色

<style type="text/css">

.square{
    position: absolute;         /*加入這行*/
    width: 100px;
    height: 100px;
    background-color: gray;
}

/* 設定top下一個多80px、設定left下一個多30px */
#s1 {background-color: #00FFFF;     top:30px;   left:0;}
#s2 {background-color: yellow;      top:110px;  left:30px;}
#s3 {background-color: red;         top:190px;  left:60px;}
#s4 {background-color: DodgerBlue;  top:270px;  left:90px;}
#s5 {background-color: pink;        top:350px;  left:120px;}

</style>

1
2
3
4
5

 

第5部份、使用了position定位，就可以寫入 z-index 設定堆疊順序

<style type="text/css">

.square{
    position: absolute;         /*加入這行*/
    width: 100px;
    height: 100px;
    background-color: gray;
}

/* 設定top下一個多80px、設定left下一個多30px */
#s1 {background-color: #00FFFF;     top:30px;   left:0;}
#s2 {background-color: yellow;      top:110px;  left:30px;  z-index: 10;}
#s3 {background-color: red;         top:190px;  left:60px;}
#s4 {background-color: DodgerBlue;  top:270px;  left:90px;  z-index: 10;}
#s5 {background-color: pink;        top:350px;  left:120px;}

</style>

1
2
3
4
5

 

完成內容：


<style type="text/css">
.square{
    position: absolute;         /*加入這行*/
    width: 100px;
    height: 100px;
    background-color: yellow;
}

/* 設定top下一個多80px、設定left下一個多30px */
#s1 {background-color: #00FFFF;     top:30px;       left:0;}
#s2 {background-color: yellow;      top:110px;      left:30px;      z-index: 10;}
#s3 {background-color: red;         top:190px;      left:60px;}
#s4 {background-color: DodgerBlue;  top:270px;      left:90px;      z-index: 10;}
#s5 {background-color: pink;        top:350px;      left:120px;}
</style>

<body style="font-size: 2.4rem;">
<div class="square" id="s1">1</div>
<div class="square" id="s2">2</div>
<div class="square" id="s3">3</div>
<div class="square" id="s4">4</div>
<div class="square" id="s5">5</div>
</body>
shape
shape