首页 > 代码库 > CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法

CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法

页脚固定的底部的两种方式:

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

 

CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法