search

博客列表 >定位类型应用场景实例操作模态框

定位类型应用场景实例操作模态框

幸福敲门的博客
幸福敲门的博客原创
2020年12月23日 01:56:421042浏览

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

一、定位的类型

序号 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>

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

上一条：flex容器与项目的常用属性实例演示下一条：flex容器与项目的常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多