Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位类型应用场景实例操作模态框
Blogger Information
Blog 41
fans 0
comment 0
visits 41001
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
1041 people have browsed it

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

一、定位的类型

序号 position定位 说明
1 静态定位（position: static） 默认,也就是文档流定位,元素的显示位置与源码顺序一致;
2 相对定位（position: relative） 相对于该元素在文档流中的原始位置进行偏移
3 绝对定位 （position: absolue） 相对于它的祖先中离它最近的”定位元素”的位置发生偏移
4 固定定位（position: fixed） 是绝对定位的一个特例,它始终相对于html定位

二、定位的应用场景

2.1相对定位实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>定位的种类</title>
  7.   <style>
  8.       * {
  9.           padding: 0;
  10.           margin: 0;
  11.           box-sizing: border-box;
  12.       }
  13.       .box {
  14.           width: 15em;
  15.           height: 15em;
  16.           border: 5px dotted red;
  17.           margin: 2em auto;
  18.       }
  19.       .box h2 {
  20.           border: 5px solid black;
  21.           background-color: red;
  22.           /* 使用相对定位 */
  23.           position: relative;
  24.           top: 3em;
  25.           left: 3em;
  26.       }
  27.   </style>
  28. </head>
  29. <body>
  30.   <div class="box">
  31.       <h2>相对定位案例精选</h2>
  32.       <p>今天不努力学习，明天努力要过穷日子!</p>
  33.   </div>
  34. </body>
  35. </html>

图示：
相对定位案例

2.2绝对定位使用条件(完全覆盖父元素)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>绝对定位的实例场景演示</title>
  7.   <style>
  8.       * {
  9.           padding: 0;
  10.           margin: 0;
  11.           box-sizing: border-box;
  12.       }
  13.       .box {
  14.           width: 15em;
  15.           height: 15em;
  16.           border: 5px dotted red;
  17.           margin: 2em auto;
  18.       }
  19.       .box {
  20.           position: relative;
  21.        }
  22.       .box h2 {
  23.           border: 5px solid black;
  24.           background-color: red;
  25.           /* 使用相对定位 */
  26.           position: absolute;
  27.           top: 0;
  28.           left: 0;
  29.           right: 0;
  30.           bottom: 0;
  31.       }
  32.   </style>
  33. </head>
  34. <body>
  35.       <div class="box">
  36.       <h2>美好的生活从敲代码学PHP程序开始！</h2>
  37.       <p>今天不努力学习，明天努力要过穷日子!</p>
  38.   </div>
  39. </body>
  40. </html>

图示：
绝对路径场景应用

2.3绝对定位应用场景

  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.       .box {
  13.           width: 15em;
  14.           height: 15em;
  15.           border: 5px solid red;
  16.           margin: 2em auto;
  18.       }
  19.       .box {
  20.           position: relative;
  21.       }
  22.       .box h2 {
  23.           border: 5px solid Snow;
  24.           background-color: Crimson;
  26.           position: fixed;
  27.           top: 0;
  28.          left: 0;
  29.       }
  30.       html {
  31.           min-height: 100em;
  32.       }
  33.   </style>
  34. </head>
  35. <body>
  36.   <div class="box">
  37.       <h2>金刚川</h2>
  38.       <p></p>
  39.   </div>
  40. </body>
  41. </html>

图示：
固定头部左边不动

三、实操模态框

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>实操模态框</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         /* 页眉 */
  14.         header{
  15.             background-color: #778899;
  16.             padding: .8em 2em;
  17.             /*清除浮动 */
  18.             overflow: hidden;
  19.         }
  20.         header h2{
  21.             /* 左浮动 */
  22.             float: left;
  23.         }
  24.         header button {
  25.             /* 右浮动 */
  26.             float: right;
  27.             width: 5em;
  28.             height: 2.5em;
  29.         }
  30.         header button:hover{
  31.             cursor: pointer;
  32.         }
  33.         /* 遮罩层 */
  34.         .modal .modal-backdrop {
  35.             background-color: rgb(0,0,0,0.5);
  36.             position: fixed;
  37.             top:0;
  38.             left:0;
  39.             right:0;
  40.             bottom: 0;
  41.         }
  42.         .modal .modal-body {
  43.             background-color: #fff;
  44.             padding: 1em;
  45.             overflow: hidden;
  46.             max-width: 20em;
  47.             max-height: 20em;
  48.             /* 固定定位 */
  49.             position: fixed;
  50.             /* 水平垂直自动居中 */
  51.             top: 0;
  52.             left: 0;
  53.             right: 0;
  54.             bottom: 0;
  55.             margin: auto;
  56.         }
  57.         .modal form table {
  58.             width: 100%;
  59.         }
  60.         .modal form table caption {
  61.             font-size: 14px;
  62.             font-weight: bold;
  63.             margin-bottom:1.6em;
  64.             margin-right:1em;
  65.         }
  66.         .modal form table td {
  67.             padding: 0.5em 0;
  68.         }
  69.         .modal form table td:first-of-type {
  70.             width:  4em;
  71.         }
  72.         .modal form table input {
  73.             width: 12em;
  74.             height: 2em;
  75.         }
  76.         .modal form table button {
  77.             width:8em;
  78.             height: 2em;
  79.         }
  80.         /* 定位父级 */
  81.         .modal-body {
  82.             position: relative;
  83.         }
  84.         .modal .close {
  85.             position: absolute;
  86.             width: 3em;
  87.             height: 1.5em;
  88.             top: 1.1em;
  89.             left: 1em;
  90.         }
  91.         .modal .close:hover {
  92.             cursor: pointer;
  93.             background-color: red;
  94.             color: white;
  95.         }
  96.         /* 模态框初始化隐藏 */
  97.         .modal {
  98.             display: none;
  99.         }
  100.     </style>
  101. </head>
  102. <body>
  103.     <!-- 页眉 -->
  104.     <header>
  105.         <h2>我的博客</h2>
  106.         <button>登录</button>
  107.     </header>
  108.     <!-- 模态框 -->
  109.     <div class="modal">
  110.         <!-- 蒙版盖住后面的内容，使他半透明 -->
  111.         <div class="modal-backdrop"></div>
  112.         <!-- 主体 -->
  113.          <div class="modal-body">
  114.             <button class="close">关闭</button>
  115.             <form action="" method="POST">
  116.                 <table>
  117.                     <caption>用户登录</caption>
  118.                     <tr>
  119.                         <td><label for="email">邮箱:</label></td>
  120.                         <td><input type="email" name="email" id="email" /></td>
  121.                     </tr>
  122.                     <tr>
  123.                         <td><label for="password">密码:</label></td>
  124.                         <td><input type="password" name="password" id="password" /></td>
  125.                     </tr>
  126.                     <tr>
  127.                         <td></td>
  128.                         <td><button>登录</button></td>
  129.                     </tr>
  130.                 </table>
  131.             </form>
  132.         </div>
  133.     </div>
  134. </body>
  135. </html>
  136. <script>
  137.     const btn = document.querySelector('header button');
  138. const modal = document.querySelector('.modal');
  139. const close = document.querySelector('.close');
  140. btn.addEventListener('click', setModal, false);
  141. close.addEventListener('click', setModal, false);
  142. function setModal(ev) {
  143.     ev.preventDefault();
  144.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  145.     modal.style.display = status === 'none' ? 'block' : 'none';
  146. }
  147. </script>

图示：
模态框点击前
模态框点击后

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