Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型与应用场景和使用条件、模态框的应用
Blogger Information
Blog 64
fans 2
comment 1
visits 46848
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
定位的类型与应用场景和使用条件、模态框的应用
Y的博客
Original
701 people have browsed it

定位的类型与应用场景和使用条件

  1. 定位的类型
  • 静态定位（position: static） 默认,也就是文档流定位,元素的显示位置与源码顺序一致;

  • 相对定位（position: relative）相对于该元素在文档流中的原始位置进行偏移；

    1. <style>
    2.       * {
    3.           padding: 0;
    4.           margin: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       .box {
    8.           height: 10em;
    9.           width: 10em;
    10.           background-color: seagreen;
    12.       }
    13.       .box h2 {
    14.           width: 4em;
    15.           height: 1.5em;
    16.           background-color: skyblue;
    17.           position: relative;
    18.           top: .1em;
    19.           left:.1em;
    21.       }

  • 绝对定位 （position: absolue） 相对于它的祖先中离它最近的”定位元素”的位置发生偏移

    1. <style>
    2.       * {
    3.           padding: 0;
    4.           margin: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       .box {
    8.           height: 10em;
    9.           width: 10em;
    10.           background-color: seagreen;
    11.           position: relative;
    12.           top: 3em;
    13.           left: 4em;
    15.       }
    16.       .box h2 {
    17.           width: 4em;
    18.           height: 1.5em;
    19.           background-color: skyblue;
    20.           position: absolute;
    21.           top: 5em;
    22.           left: 5em;
    24.       }
    25.   </style>

  • 固定定位（position: fixed）是绝对定位的一个特例,它始终相对于html定位

    1. <style>
    2.       * {
    3.           padding: 0;
    4.           margin: 0;
    5.           box-sizing: border-box;
    6.       }
    7.       .box {
    8.           height: 10em;
    9.           width: 10em;
    10.           background-color: seagreen;
    11.           position: fixed;
    12.           right: 1em;
    13.           bottom: 1em;
    15.       }
    16.       .box h2 {
    17.           width: 4em;
    18.           height: 1.5em;
    19.           background-color: skyblue;
    20.           position: relative;
    21.           top: .1em;
    22.           left: .1em;
    24.       }
    25.   </style>

    2.模态框的应用 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>模态框</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         header {
  16.             background-color: lightgrey;
  17.             padding: 0.5em 2em;
  18.             overflow: hidden;
  19.         }
  21.         header h2 {
  22.             float: left;
  23.         }
  25.         header button {
  26.             float: right;
  27.             width: 10em;
  28.             height: 2.5em;
  29.             border-radius: 0.2em;
  30.         }
  32.         header button:hover {
  33.             cursor: pointer;
  34.             background-color: lightseagreen;
  35.         }
  37.         .modal .modal-backdrop {
  38.             background-color: rgb(0, 0, 0, 0.5);
  39.             position: fixed;
  40.             top: 0;
  41.             left: 0;
  42.             right: 0;
  43.             bottom: 0;
  45.         }
  47.         .modal .modal-body {
  48.             padding: 1em;
  49.             min-width: 20em;
  50.             border: 1px solid #000;
  51.             background-color: rgba(176, 235, 225, 0.781);
  52.             position: fixed;
  53.             top: 5em;
  54.             left: 30em;
  55.             right: 30em;
  56.         }
  58.         .modal .modal-body .close {
  59.             float: right;
  60.         }
  62.         .modal .modal-body table {
  63.             margin: auto;
  64.             padding: 1em;
  65.         }
  67.         .modal form table button {
  68.             width: 6em;
  69.             height: 3em;
  70.             background-color: thistle;
  71.             position: relative;
  72.             top: 1em;
  73.             left: 8em;
  75.         }
  77.         .modal form table button:hover {
  78.             cursor: pointer;
  79.             background-color: turquoise;
  81.         }
  83.         .modal {
  84.             display: none;
  85.         }
  86.     </style>
  87. </head>
  89. <body>
  90.     <!-- 页眉 -->
  91.     <header>
  92.         <h2>我的博客</h2>
  93.         <button>登录</button>
  94.     </header>
  95.     <!-- 模态框 -->
  96.     <div class="modal">
  97.         <!-- 蒙版：用来遮罩后面的内容使他半透明 -->
  98.         <div class="modal-backdrop"></div>
  99.         <!-- 主体 -->
  100.         <div class="modal-body">
  101.             <button class="close">关闭</button>
  102.             <form action="" method="post">
  103.                 <table>
  104.                     <caption>用户登录</caption>
  105.                     <tr>
  106.                         <td><label for="email">邮箱</label></td>
  107.                         <td><input type="email"></td>
  108.                     </tr>
  109.                     <tr>
  110.                         <td><label for="password">密码</label></td>
  111.                         <td><input type="password" name="password" id="password"></td>
  112.                     </tr>
  113.                     <tr>
  114.                         <td><button>登录</button></td>
  115.                     </tr>
  116.                 </table>
  117.             </form>
  118.         </div>
  119.     </div>
  120.     <script src="../1221/modal.js"></script>
  121. </body>
  123. </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