Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型与应用场景和使用条件、实现一个模态框
Blogger Information
Blog 47
fans 3
comment 0
visits 38261
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
758 people have browsed it

定位的类型与应用场景和使用条件、实现一个模态框

1.定位的类型

定位的类型:静态定位static,相对定位relative,绝对定位absolute,固定定位fixed

1.静态定位:position(static)默认,也就是文档流的定位,元素的显示位置与源码顺序一致

2.相对定位:position(relative),相对于元素在文档流中的元素位置进行偏移

3.绝对定位:position(absolue),相对于它的祖先中离它最近的”定位元素”的位置进行偏移

4.固定定位:position(fixed),是绝对定位的一个特例,它始终相对于html定位
如果祖先元素中不存在定位元素,它就参照根元素(html)进行定位
position(static)不是定位元素
只有定位元素才有资格充当绝对定位元素的定位祖先元素(定位参考元素,定位父级)

2.应用场景和使用条件

  • 相对定位:position(relative)

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>定位的种类</title>
    6.   <style>
    7.       * {
    8.           padding: 0;
    9.           margin: 0;
    10.           box-sizing: border-box;
    11.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box h2 {
    20.           border: 1px solid black;
    21.           background-color: skyblue;
    23.           /* 使用相对定位 */
    24.           position: relative;
    25.           top: 1em;
    26.           left: 1em;
    27.       }
    28.   </style>
    29. </head>
    30. <body>
    31.   <div class="box">
    32.       <h2>Hello World</h2>
    33.       <p>广告位广告位广告位!</p>
    34.   </div>
    35. </body>
    36. </html>

    演示截图

  • 绝对定位并完全覆盖父元素 :position(absolue)

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>定位的种类</title>
    6.   <style>
    7.       * {
    8.           padding: 0;
    9.           margin: 0;
    10.           box-sizing: border-box;
    11.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box {
    20.           position: relative;
    21.       }
    22.       .box h2 {
    23.           border: 1px solid violet;
    24.           background-color: skyblue;
    25.           position: absolute;
    26.           top: 0;
    27.           left: 0;
    28.           right: 0;
    29.           bottom: 0;
    30.       }
    32.   </style>
    33. </head>
    34. <body>
    35.   <div class="box">
    36.       <h2>Hello World</h2>
    37.       <p>广告位广告位广告位!</p>
    38.   </div>
    39. </body>
    40. </html>

    演示截图

  • 固定定位实现右下角广告: position(fixed)

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>定位的种类</title>
    6.   <style>
    7.       * {
    8.           padding: 0;
    9.           margin: 0;
    10.           box-sizing: border-box;
    11.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box {
    20.           position: relative;
    21.       }
    22.       .box h2 {
    23.           border: 1px solid violet;
    24.           background-color: skyblue;
    25.           position: fixed;
    27.           bottom: 0;
    28.           right: 0;
    29.       }
    30.       html {
    31.           min-height: 100em;
    32.       }
    34.   </style>
    35. </head>
    36. <body>
    37.   <div class="box">
    38.       <h2>Hello World</h2>
    39.       <p>广告位广告位广告位!</p>
    40.   </div>
    41. </body>
    42. </html>

2.实现一个模态框

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>固定定位实现:模态框</title>
  6.     <style>
  7.         * {
  8.     padding: 0;
  9.     margin: 0;
  10.     box-sizing: border-box;
  11. }
  12. header {
  13.     background-color: skyblue;
  14.     overflow: hidden;
  15. }
  16. header h2 {
  17.     float: left;
  18. }
  19. header button {
  20.     height: 3em;
  21.     width: 10em;
  22.     float: right;
  23. }
  25. header button:hover {
  26.     cursor: pointer;
  27.     background-color: #fff;
  28. }
  29. .close {
  30.     float: right;
  31.     height: 2.5em;
  32.     width: 3em;
  33.     border: 0;
  34.     border-radius: 0.5em;
  35.     outline: none;
  36.     background-color: rgb(1, 231, 135);
  37. }
  38. .close:hover {
  39.     background-color: #eee;
  40. }
  41. /* 蒙版 */
  42. .modal .modal-backdrap {
  43.     background-color: rgb(0,0,0,0.5);
  44.     position: fixed;
  45.     top: 0;
  46.     left: 0;
  47.     right: 0;
  48.     bottom: 0;
  49. }
  50. .modal .modal-body {
  51.     padding: 1em;
  52.     min-width: 20em;
  53.     border-radius: 0.5em;
  54.     border: 1px solid rgb(255, 255, 255);
  55.     background: linear-gradient(to right,rgb(54, 206, 252),violet);
  57.     /* 固定定位 */
  58.     position: fixed;
  59.     top: 5em;
  60.     left: 30em;
  61.     right: 30em;
  62. }
  63. .dl {
  64.     margin: 0.5em 5em ;
  65.     height: 2em;
  66.     width: 8em;
  67.     outline: none;
  68.     border: 0;
  69.     border-radius: 0.5em;
  70.     background-color: rgb(17, 255, 215);
  71. }
  72. .dl:hover{
  73.     background-color: #fff;
  74. }
  75. .modal {
  76.     display: none;
  77. }
  78.     </style>
  79. </head>
  80. <body>
  81.     <header>
  82.         <h2>我的博客</h2>
  83.         <button>登录</button>
  84.     </header>
  85.     <div class="modal">
  86.         <!-- 蒙版 -->
  87.         <div class="modal-backdrap"></div>
  89.         <!-- 主体 -->
  90.         <div class="modal-body">
  91.             <button class="close">关闭</button>
  92.             <form action="" method="POST">
  93.                 <h2>用户登录</h2>
  94.                 <label>账号:</label>
  95.                 <input type="text" name="user" id="user" value="" placeholder="请输入用户名" /><br>
  96.                 <label>密码:</label>
  97.                 <input type="password" name="password" id="password" value="" placeholder="请输入密码" /><br>
  98.                 <button class="dl">登录</button>
  99.             </form>
  100.         </div>
  101.     </div>
  102.     <script src="modal.js"></script>
  103. </body>
  104. </html>

演示截图

Correcting teacher：天蓬老师天蓬老师

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