CSS中position屬性的理解，相對位置relative，絕對位置absolute，固定fixed，頁腳固定的實現2種方法

本文轉載自查看原文 2017-02-04 17:43 2917 css

頁腳固定的底部的兩種方式：

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的父元素而言

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [NLP] 相對位置編碼(一) Relative Position Representatitons (RPR) - Transformer position_relative+absolute 搭配使用，實現絕對定位放大縮小都不影響其絕對位置【CSS3】---層模型position之fixed固定定位、absolute絕對定位和relative相對定位關於CSS中的定位使用子絕父相（子類絕對位置和父類相對位置） CSS中position屬性( absolute | relative | static | fixed )詳解 JQuery 獲得絕對,相對位置的坐標方法通過設置CSS position 屬性來固定層的位置固定定位fixed，絕對定位absolute，相對定位relative；以及overflow css固定元素位置(fixed) html---定位position（固定，相對（relative），絕對（absolute））