ASCII码 ASCII码

绝对定位与固定定位实例演示以及两者差异

发布于：2022-07-13 13:16:52  栏目：技术文档

绝对定位

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.固定定位是相对于浏览器窗口的位置进行定位，比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行