Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 绝对定位与固定定位实例演示以及两者差异
Blogger Information
Blog 36
fans 1
comment 0
visits 26442
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
绝对定位与固定定位实例演示以及两者差异
早晨
Original
514 people have browsed it

绝对定位

position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
父级有定位，则看父级，父级没有定位，则继续向上找父级，实在找不到的话，根浏览器对齐。

实例演示没有父级元素（找不到上级定位元素时）：
代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>绝对定位实例演示--没有父级</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.     .box{
  15.         width: 500px;
  16.         height: 500px;
  17.         border: 2px solid blue;
  18.         background-color: antiquewhite;
  19.     }
  20.     .box1{
  21.         width: 300px;
  22.         height: 300px;
  23.         border: 3px solid rgb(2, 136, 62);
  24.         background-color: cadetblue;
  25.         color: red;
  26.         /* 绝对定位：顶部距离：30px，左边距离：50px。 */
  27.         position:absolute;
  28.         top:30px;
  29.         left: 50px;
  30.     }
  32. </style>
  33. <body>
  34.     <div class="box">
  35.         <div class="box1">绝对定位</div>
  36.     </div>
  37. </body>
  38. </html>

运行效果：

实例演示有父级元素（当父级没有设置定位时，继续向上级找父级，都没有找到以浏览器对齐）：

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>绝对定位实例演示----有父级</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.     .box{
  15.         width: 500px;
  16.         height: 500px;
  17.         border: 2px solid blue;
  18.         background-color: antiquewhite;
  19.         position:relative;
  20.         margin-top: 150px;
  21.         margin-left: 150px;
  22.     }
  23.     .box1{
  24.         width: 300px;
  25.         height: 300px;
  26.         border: 3px solid rgb(2, 136, 62);
  27.         background-color: cadetblue;
  28.         color: red;
  29.         /* 绝对定位：顶部距离：30px，左边距离：50px。 */
  30.         position:absolute;
  31.         top:30px;
  32.         left: 50px;
  33.     }
  35. </style>
  36. <body>
  37.     <div class="box">
  38.         <div class="box1">绝对定位</div>
  39.     </div>
  40. </body>
  41. </html>

运行效果：

固定定位

position：fixed；固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。常用的就是网站或者APP的导航栏和底部的选择栏。

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>固定定位实例演示</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.     .box{
  15.         width: 500px;
  16.         height: 500px;
  17.         border: 2px solid blue;
  18.         background-color: antiquewhite;
  19.         position:relative;
  20.         margin-top: 50px;
  21.         margin-left: 50px;
  22.     }
  23.     .box1{
  24.         width: 300px;
  25.         height: 300px;
  26.         border: 3px solid rgb(2, 136, 62);
  27.         background-color: cadetblue;
  28.         color: red;
  29.         /* 绝对定位：顶部距离：30px，左边距离：50px。 */
  30.         position:absolute;
  31.         top:30px;
  32.         left: 50px;
  33.     }
  35.     .nav{
  36.         width: auto;
  37.         height: 40px;
  38.         background-color: #ccc;
  39.         position: fixed;
  40.         bottom: 0;
  41.     }
  42.     .nav li{
  43.         width: 10rem;
  44.         display: inline-block;
  45.         text-align: center;
  46.         line-height: 40px;
  47.     }
  49. </style>
  50. <body>
  51.     <div class="box">
  52.         <div class="box1">绝对定位</div>
  53.     </div>
  55.     <div class="nav">
  56.         <ul>
  57.             <li><a href="#">网站首页</a></li>
  58.             <li><a href="#">公司简介</a></li>
  59.             <li><a href="#">产品展示</a></li>
  60.             <li><a href="#">联系我们</a></li>
  61.         </ul>
  62.     </div>
  63. </body>
  64. </html>

运行效果：

绝对定位和固定定位差异

1.绝对定位如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)
2.绝对定位会使得元素脱离文档流
3.绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位)
4.绝对定位也会使得元素提升一个层级
5.绝对定位会改变元素的性质，行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)
6.固定定位也是绝对定位的一种，拥有绝对定位的大部分特点
7.固定定位是相对于浏览器窗口的位置进行定位，比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post