简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1221 定位的类型与应用场景和使用条件+实现一个模态框
Blogger Information
Blog 13
fans 0
comment 0
visits 8276
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
1221 定位的类型与应用场景和使用条件+实现一个模态框
一米互联
Original
595 people have browsed it

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

定位：position
定位的四种类型

  1. 静态定位：static
    1. position: static; 默认,文档流定位
  2. 相对定位:relative
    1. position: relative; 相对于该元素在文档流中的原始位置进行偏移
  3. 绝对定位:absolute
    1. position: absolute; 相对于它的祖先中离它最近的”定位元素”的位置发生偏移
    2. 如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位。
    3. 只要元素中有position: relative;
      或者position: absolute; 就称之为定位元素
  4. 固定定位:fixed
    1. position: fixed; 是绝对定位的一个特例,它始终相对于html定位

相对定位：

  1.         *{
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         .pos{
  7.             width:15em;
  8.             height:15em;
  9.             border: 2px solid black;
  10.         }
  11.         .pos h2{
  12.             background: lightgreen;
  13.             position: relative;
  14.             top: 1em;
  15.             left: 2em;
  16.         }
  1. <div class="pos">
  2.         <h2>小标题</h2>
  3.         <p>PHP中文网因专业的讲师水平和高效的视频质量，我们在这篇文章中特意将《天龙八部》系列课程整理出来供大家有针对性得学习！</p>
  4.     </div>

绝对定位：

  1.         *{
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         .pos{
  7.             width:15em;
  8.             height:15em;
  9.             border: 2px solid black;
  10.             position: relative;
  11.         }
  12.         .pos h2{
  13.             background: lightgreen;
  14.             position: absolute;
  15.             top: 1em;
  16.             left: 2em;
  17.         }


固定定位

  1.        *{
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         html{
  7.             min-height: 100em;
  8.         }
  9.         .pos{
  10.             width:15em;
  11.             height:15em;
  12.             border: 2px solid black;
  13.             margin: 10em auto;
  14.         }
  15.         .pos h2{
  16.             width: 15em;
  17.             height: 5em;
  18.             text-align: center;
  19.             line-height: 5em;
  20.             background: lightgreen;
  21.             position:fixed;
  22.         }

2模仿课堂案例，实现一个模态

css代码：

  1. <style>
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. header{
  8.     background: cornsilk;
  9.     padding: 1em 2em;
  10.     overflow: hidden;
  11. }
  12. header h2{
  13.     float: left;
  14. }
  15. header button{
  16.     float: right;
  17.     width: 10em;
  18.     height: 2.5em;
  19.     background: rgb(211, 174, 162);
  20.     transition: 0.5s;
  21. }
  22. header button:hover{
  23.     cursor: pointer;
  24.     background-color: #fff;
  25. }
  27. /* 模态框样式内容 */
  28. .modal .modal-backdrop{
  29.     position:fixed;
  30.     top: 0;
  31.     bottom: 0;
  32.     left: 0;
  33.     right: 0;
  34.     background-color: rgb(7, 7, 7,0.5);
  35. }
  36. .modal .modal-body{
  37.     padding: 1em;
  38.     min-width: 20em;
  39.     border: 1px solid black;
  40.     background:linear-gradient(to right,lightcyan,white);
  41.     position: fixed;
  42.     top: 5em;
  43.     left: 30em;
  44.     right: 30em;
  45. }
  46. .modal {
  47.     display: none;
  48. }
  49. .modal-body{
  50.     position: relative;
  51. }
  52. .close{
  53. position: absolute;
  54. top: 0;
  55. right: 0;
  56. border-radius: 0;
  57. border: 0.1px solid rgb(153, 153, 153);
  58. }
  59. .modal-body button.click{
  60.     width: 13em;
  61.     height: 2em;
  62.     transition: 0.5s;
  63. }
  64. .modal-body button.click:hover{
  65.     background: white;
  66.     border: 1px solid #ccc;
  67. }
  68.     </style>

html代码：

  1. <body>
  2.     <!--头部信息-->
  3.     <header>
  4.         <h2>我的博客:</h2>
  5.         <button>登　　录</button>
  6.     </header>
  7.     <!--模态框-->
  8.     <div class="modal">
  9.         <!-- 蒙版：用来盖住后面的内容，半透明状态 -->
  10.         <div class="modal-backdrop"></div>
  11.         <!--主体内容-->
  12.         <div class="modal-body">
  13.             <button class="close">关闭</button>
  14.             <form action="" method="POST">
  15.                 <table>
  16.                     <caption>用户登录</caption>
  17.                     <tr>
  18.                         <td><label for="email">邮箱：</label></td>
  19.                         <td><input type="email" name="email" id="email" /></td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td><label for="password">密码：</label></td>
  23.                         <td><input type="password" name="password" id="password" /></td>
  24.                     </tr>
  25.                     <tr>
  26.                         <td></td>
  27.                         <td><button class="click">点此登录</button></td>
  28.                     </tr>
  29.                 </table>
  30.             </form>
  31.         </div>
  32.     </div>
  33.     <script src="modal.js"></script>
  34. </body>


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！