search

博客列表 >绝对定位与固定定位

绝对定位与固定定位

新手1314
新手1314原创
2022年07月12日 17:50:22578浏览

1.绝对定位

  1. 使用方法：position: absolute
  2. 定位参照物：相对于"距离它最近的定位元素的位置",即常说的"定位父级",逐级向上直到最初包含块

1.1 如果绝对定位的父级为HTML时

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.   <body>
  10.     <div class="parent">
  11.       <div class="child one">child-1 :相对定位</div>
  12.       <div class="child two">child-2 :绝对定位</div>
  13.       <div class="child three">child-3 :固定定位</div>
  14.     </div>
  15.     <style>
  16.       .child {
  17.         border: 1px solid #000;
  18.         padding: 20px;
  19.       }
  20.       .parent {
  21.         width: 400px;
  22.         height: 400px;
  23.         background-color: lightcyan;
  24.         border: 1px solid #000;
  25.       }
  26.       .child.one {
  27.         background-color: lightblue;
  28.         display: none;
  29.       }
  30.       .child.two {
  31.         background-color: lightcoral;
  32.         position: absolute;
  33.         right: 0;
  34.         bottom: 0;
  35.       }
  36.       .child.three {
  37.         background-color: lightgreen;
  38.       }
  39.       html {
  40.         position: relative;
  41.         border: 10px solid red;
  42.       }
  43.       body {
  44.         border: 10px solid blue;
  45.       }
  46.     </style>
  47.   </body>
  48. </html>

1.1.1 效果：

1.2 如果绝对定位的父级为body时

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.   <body>
  10.     <div class="parent">
  11.       <div class="child one">child-1 :相对定位</div>
  12.       <div class="child two">child-2 :绝对定位</div>
  13.       <div class="child three">child-3 :固定定位</div>
  14.     </div>
  15.     <style>
  16.       .child {
  17.         border: 1px solid #000;
  18.         padding: 20px;
  19.       }
  20.       .parent {
  21.         width: 400px;
  22.         height: 400px;
  23.         background-color: lightcyan;
  24.         border: 1px solid #000;
  25.       }
  26.       .child.one {
  27.         background-color: lightblue;
  28.         display: none;
  29.       }
  30.       .child.two {
  31.         background-color: lightcoral;
  32.         position: absolute;
  33.         right: 0;
  34.         bottom: 0;
  35.       }
  36.       .child.three {
  37.         background-color: lightgreen;
  38.       }
  39.       html {
  40.         border: 10px solid red;
  41.       }
  42.       body {
  43.         position: relative;
  44.         border: 10px solid blue;
  45.       }
  46.     </style>
  47.   </body>
  48. </html>

1.2.1 效果：

如果绝对定位的父级为parent时

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.   <body>
  10.     <div class="parent">
  11.       <div class="child one">child-1 :相对定位</div>
  12.       <div class="child two">child-2 :绝对定位</div>
  13.       <div class="child three">child-3 :固定定位</div>
  14.     </div>
  15.     <style>
  16.       .child {
  17.         border: 1px solid #000;
  18.         padding: 20px;
  19.       }
  20.       .parent {
  21.         position: relative;
  22.         width: 400px;
  23.         height: 400px;
  24.         background-color: lightcyan;
  25.         border: 1px solid #000;
  26.       }
  27.       .child.one {
  28.         background-color: lightblue;
  29.         display: none;
  30.       }
  31.       .child.two {
  32.         background-color: lightcoral;
  33.         position: absolute;
  34.         right: 0;
  35.         bottom: 0;
  36.       }
  37.       .child.three {
  38.         background-color: lightgreen;
  39.       }
  40.       html {
  41.         border: 10px solid red;
  42.       }
  43.       body {
  44.         border: 10px solid blue;
  45.       }
  46.     </style>
  47.   </body>
  48. </html>

1.3.1 效果：

1.4 如果父级所有元素都没有可定位的元素，就会定位到“初始包含块”

2.固定定位(会随着页面移动而移动)

  1. 使用方法：position: fixed
  2. 定位参照物：总是相对于"最初包含块"定位

2.1 HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.   <body>
  10.     <div class="parent">
  11.       <div class="child one">child-1 :相对定位</div>
  12.       <div class="child two">child-2 :绝对定位</div>
  13.       <div class="child three">child-3 :固定定位</div>
  14.     </div>
  15.     <style>
  16.       .child {
  17.         border: 1px solid #000;
  18.         padding: 20px;
  19.       }
  20.       .parent {
  21.         /* position: relative; */
  22.         width: 400px;
  23.         height: 400px;
  24.         background-color: lightcyan;
  25.         border: 1px solid #000;
  26.       }
  27.       .child.one {
  28.         background-color: lightblue;
  29.         display: none;
  30.       }
  31.       .child.two {
  32.         background-color: lightcoral;
  33.         position: absolute;
  34.         right: 0;
  35.         bottom: 0;
  36.       }
  37.       .child.three {
  38.         position: fixed;
  39.         background-color: lightgreen;
  40.         top: 50px;
  41.         left: 50px;
  42.       }
  43.       html {
  44.         border: 10px solid red;
  45.       }
  46.       body {
  47.         height: 2000px;
  48.         border: 10px solid blue;
  49.       }
  50.     </style>
  51.   </body>
  52. </html>

2.2 效果：

上一条：绝对定位与固定定位实例演示以及两者差异下一条：相对定位，绝对定位，固定定位的区别与分析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多