search

博客列表 >定位的类型与应用场景和使用条件、实现一个模态框

定位的类型与应用场景和使用条件、实现一个模态框

吳
吳 原创
2020年12月22日 04:21:38757浏览

定位的类型与应用场景和使用条件、实现一个模态框

1.定位的类型

定位的类型:静态定位static,相对定位relative,绝对定位absolute,固定定位fixed

1.静态定位:position(static)默认,也就是文档流的定位,元素的显示位置与源码顺序一致

2.相对定位:position(relative),相对于元素在文档流中的元素位置进行偏移

3.绝对定位:position(absolue),相对于它的祖先中离它最近的”定位元素”的位置进行偏移

4.固定定位:position(fixed),是绝对定位的一个特例,它始终相对于html定位
如果祖先元素中不存在定位元素,它就参照根元素(html)进行定位
position(static)不是定位元素
只有定位元素才有资格充当绝对定位元素的定位祖先元素(定位参考元素,定位父级)

2.应用场景和使用条件

  • 相对定位:position(relative)

    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.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box h2 {
    20.           border: 1px solid black;
    21.           background-color: skyblue;
    23.           /* 使用相对定位 */
    24.           position: relative;
    25.           top: 1em;
    26.           left: 1em;
    27.       }
    28.   </style>
    29. </head>
    30. <body>
    31.   <div class="box">
    32.       <h2>Hello World</h2>
    33.       <p>广告位广告位广告位!</p>
    34.   </div>
    35. </body>
    36. </html>

    演示截图

  • 绝对定位并完全覆盖父元素 :position(absolue)

    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.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box {
    20.           position: relative;
    21.       }
    22.       .box h2 {
    23.           border: 1px solid violet;
    24.           background-color: skyblue;
    25.           position: absolute;
    26.           top: 0;
    27.           left: 0;
    28.           right: 0;
    29.           bottom: 0;
    30.       }
    32.   </style>
    33. </head>
    34. <body>
    35.   <div class="box">
    36.       <h2>Hello World</h2>
    37.       <p>广告位广告位广告位!</p>
    38.   </div>
    39. </body>
    40. </html>

    演示截图

  • 固定定位实现右下角广告: position(fixed)

    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.       }
    13.       .box {
    14.           width: 15em;
    15.           height: 15em;
    16.           border: 1px solid red;
    17.           margin: 2em auto;
    18.       }
    19.       .box {
    20.           position: relative;
    21.       }
    22.       .box h2 {
    23.           border: 1px solid violet;
    24.           background-color: skyblue;
    25.           position: fixed;
    27.           bottom: 0;
    28.           right: 0;
    29.       }
    30.       html {
    31.           min-height: 100em;
    32.       }
    34.   </style>
    35. </head>
    36. <body>
    37.   <div class="box">
    38.       <h2>Hello World</h2>
    39.       <p>广告位广告位广告位!</p>
    40.   </div>
    41. </body>
    42. </html>

2.实现一个模态框

  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. header {
  13.     background-color: skyblue;
  14.     overflow: hidden;
  15. }
  16. header h2 {
  17.     float: left;
  18. }
  19. header button {
  20.     height: 3em;
  21.     width: 10em;
  22.     float: right;
  23. }
  25. header button:hover {
  26.     cursor: pointer;
  27.     background-color: #fff;
  28. }
  29. .close {
  30.     float: right;
  31.     height: 2.5em;
  32.     width: 3em;
  33.     border: 0;
  34.     border-radius: 0.5em;
  35.     outline: none;
  36.     background-color: rgb(1, 231, 135);
  37. }
  38. .close:hover {
  39.     background-color: #eee;
  40. }
  41. /* 蒙版 */
  42. .modal .modal-backdrap {
  43.     background-color: rgb(0,0,0,0.5);
  44.     position: fixed;
  45.     top: 0;
  46.     left: 0;
  47.     right: 0;
  48.     bottom: 0;
  49. }
  50. .modal .modal-body {
  51.     padding: 1em;
  52.     min-width: 20em;
  53.     border-radius: 0.5em;
  54.     border: 1px solid rgb(255, 255, 255);
  55.     background: linear-gradient(to right,rgb(54, 206, 252),violet);
  57.     /* 固定定位 */
  58.     position: fixed;
  59.     top: 5em;
  60.     left: 30em;
  61.     right: 30em;
  62. }
  63. .dl {
  64.     margin: 0.5em 5em ;
  65.     height: 2em;
  66.     width: 8em;
  67.     outline: none;
  68.     border: 0;
  69.     border-radius: 0.5em;
  70.     background-color: rgb(17, 255, 215);
  71. }
  72. .dl:hover{
  73.     background-color: #fff;
  74. }
  75. .modal {
  76.     display: none;
  77. }
  78.     </style>
  79. </head>
  80. <body>
  81.     <header>
  82.         <h2>我的博客</h2>
  83.         <button>登录</button>
  84.     </header>
  85.     <div class="modal">
  86.         <!-- 蒙版 -->
  87.         <div class="modal-backdrap"></div>
  89.         <!-- 主体 -->
  90.         <div class="modal-body">
  91.             <button class="close">关闭</button>
  92.             <form action="" method="POST">
  93.                 <h2>用户登录</h2>
  94.                 <label>账号:</label>
  95.                 <input type="text" name="user" id="user" value="" placeholder="请输入用户名" /><br>
  96.                 <label>密码:</label>
  97.                 <input type="password" name="password" id="password" value="" placeholder="请输入密码" /><br>
  98.                 <button class="dl">登录</button>
  99.             </form>
  100.         </div>
  101.     </div>
  102.     <script src="modal.js"></script>
  103. </body>
  104. </html>

演示截图

上一条：定位和五环下一条：定位的类型与应用场景和使用条件及模态框案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多