Community Learn Tools Library Leisure
search
English
Home > List of blog posts > position定位的理解，实例操作一个模态框。
Blogger Information
Blog 20
fans 1
comment 0
visits 17584
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
position定位的理解，实例操作一个模态框。
xosing的博客
Original
625 people have browsed it

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

position值 说明
static 默认值,也就是文档流定位,元素的显示位置与源码顺序一致;
relative 相对定位，相对于该元素在文档流中的原始位置进行偏移 。元素的位置通过 “left”, “top”, “right””bottom” 属性进行规定。
absolute 绝对定位，相对于static以外的第一个父元素进行定位，如果没有则参考根元素(html)进行定位。元素的位置通过 “left”, “top”, “right””bottom” 属性进行规定。
fixed 是绝对定位的一个特例,它始终相对于html定位。元素的位置通过 “left”, “top”, “right””bottom” 属性进行规定。

position:relative 示例

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. h2.h2_left{position:relative;left:-50px}
  5. h2.h2_right{position:relative;left:50px}
  6. </style>
  7. </head>
  8. <body>
  9. <h2>正常位置的标题</h2>
  10. <h2 class="h2_left">relative值向左移动-50px</h2>
  11. <h2 class="h2_right">relative值向右移动50px</h2>
  12. </body>
  13. </html>

position:absolute 示例

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         .box {
  5.             border: 1px solid #000;
  6.         }
  7.         h2.pos_abs {
  8.             position: absolute;
  9.             left: 60px;
  10.             top: 70px
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="box">
  16.         <h2 class="pos_abs">这是带有绝对定位absolute的标题</h2>
  17.         <p>通过绝对定位，元素可以放置到页面上的任何位置，不存在文档流作用。</p>
  18.     </div>
  19. </body>
  20. </html>

position:fixed 示例

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         * {
  5.             margin: 0;
  6.             padding: 0;
  7.             box-sizing: border-box;
  8.         }
  9.         .box {
  10.             background-color: aquamarine;
  11.             min-height:1600px;
  12.         }
  13.         p.one {
  14.             position: fixed;
  15.             left: 5px;
  16.             top: 5px;
  17.         }
  18.         p.two {
  19.             position: fixed;
  20.             top: 130px;
  21.             right: 5px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box">
  27.         <p class="one">fixed固定位置</p>
  28.         <p class="two">更多的文本。</p>
  29.     </div>
  30. </body>
  31. </html>

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

代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>固定定位实现:模态框</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <!-- 页眉 -->
  11.     <header>
  12.         <h2>我的模态框</h2>
  13.         <button>登录</button>
  14.     </header>
  15.     <!-- 模态框 -->
  16.     <div class="modal">
  17.         <!-- 蒙板:用来盖住后面的内容,使它半透明 -->
  18.         <div class="modal-backdrop"></div>
  19.         <!-- 主体 -->
  20.         <div class="modal-body">
  21.             <button class="close">关闭</button>
  22.             <form action="" method="POST">
  23.                 <table>
  24.                     <caption>用户登录</caption>
  25.                     <tr>
  26.                         <td><label for="email">邮箱:</label></td>
  27.                         <td><input type="email" name="email" id="email" /></td>
  28.                     </tr>
  29.                     <tr>
  30.                         <td><label for="password">密码:</label></td>
  31.                         <td><input type="password" name="password" id="password" /></td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td></td>
  35.                         <td><button>登录</button></td>
  36.                     </tr>
  37.                 </table>
  38.             </form>
  39.         </div>
  40.     </div>
  41.     <script src="modal.js"></script>
  42. </body>
  43. </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