頁腳固定的底部的兩種方式：
1、使用fixed屬性值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="height: 1500px;width: 100%;background-color: green;margin-bottom: 320px;"> 8 9 </div> 10 <div style="height: 300px;position: fixed;bottom: 0;background-color: red;width: 100%;"> 11 12 </div> 13 </body> 14 </html>
注意點：要給第一個div設置一個margin-bottom，要不會被fixed的div給覆蓋，而使用相對位置絕對位置的則不要
效果圖如下：
2、使用相對絕對位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="background-color: green;position: absolute;top: 0;bottom: 320px;width: 100%;overflow: scroll;"> 8 <div style="height: 1500px;"></div> 9 </div> 10 <div style="position: absolute;bottom: 0;height: 300px;width: 100%;background-color: red;"></div> 11 </body> 12 </html>
實現的效果圖和使用fixed的一致，第一個的div的大小會自適應，但是bottom為320px,不會覆蓋了下一個同級高度無300px的div，要是第一個div的內容過多，會出現滾動條
效果如下所示：
相對位置、絕對位置的理解：
1、相對位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="width: 200px;height: 300px;background-color: red;margin-top: 30px;"> 8 <div> 9 <div style="top: 20px;position:relative;border:1px solid white;width: 50px;height: 30px;background-color: black;"></div> 10 </div> 11 </div> 12 </body> 13 </html>
效果圖如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="position: relative;width: 200px;height: 300px;background-color: red;margin-top: 30px;"> 8 <div> 9 <div style="top: 20px;border:1px solid white;width: 50px;height: 30px;background-color: black;"></div> 10 </div> 11 </div> 12 </body> 13 </html>
效果圖如下：
比較上面兩項發現，要是top為20的div沒有設置position為relative，top屬性沒有生效，要是設置position為relative，則是相對於自身，也就是沒有第二張效果圖的位置向下移動20px
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="width: 200px;height: 300px;background-color: red;margin-top: 30px;"> 8 <div> 9 <div style="height: 60px;width: 30px;background-color: green;"></div> 10 <div style="top: 20px;border:1px solid white;width: 50px;height: 30px;background-color: black;"></div> 11 </div> 12 </div> 13 </body> 14 </html>
效果圖如下，注意位置哦：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="width: 200px;height: 300px;background-color: red;margin-top: 30px;"> 8 <div> 9 <div style="height: 60px;width: 30px;background-color: green;"></div> 10 <div style="position: relative;top: 20px;border:1px solid white;width: 50px;height: 30px;background-color: black;"></div> 11 </div> 12 </div> 13 </body> 14 </html>
效果圖如下：
由以上得出結論：position為relative都是相對於自身而言
2、絕對位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="width: 200px;height: 300px;background-color: red;margin-top: 30px;"> 8 <div> 9 <div style="height: 60px;width: 30px;background-color: green;"></div> 10 <div style="position: absolute;top: 20px;border:1px solid white;width: 50px;height: 30px;background-color: black;"></div> 11 </div> 12 </div> 13 </body> 14 </html>
效果圖如下：
將top為20的div的position設置為absolute，那么就會向上找到的position為relative的父元素，要是沒有找到，則是相對於body的top為20px，否則是相對於含有position為relative的父元素而言