Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS定位类型和弹出层效果
Blogger Information
Blog 19
fans 0
comment 6
visits 19093
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
CSS定位类型和弹出层效果
葵花宝典
Original
905 people have browsed it

元素的定位属性是 position, 定位类型有 4 种

  1. position:static; 静态定位, 元素的默认定位值, 文档流中的原始位置
  2. position:relative; 相对定位, 将元素在当前位置偏移, 不会脱离文档流, 偏移后会遮挡其这它元素,它的位置还是保留的.
  3. position:absolue; 绝对定位, 在它的父级元素中找最近的”定位元素”, 以此元素的位置做偏移,如果没找到,就以 HTML 的位置做偏移 (定位元素:出显过 relative 和 absolue) , 绝对定位会将元素脱离文档流, 相邻的元素会占用它原来的位置.
  4. position:fixed; 固定定位, 以 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.       .a {
  14.         border: 0.8em solid blue;
  15.         border-radius: 50%;
  16.         height: 10em;
  17.         width: 10em;
  18.       }
  19.       .b {
  20.         border: 0.8em solid black;
  21.         border-radius: 50%;
  22.         height: 10em;
  23.         width: 10em;
  24.         position: absolute;
  25.         left: 8em;
  26.         top: 0;
  27.       }
  28.       .c {
  29.         border: 0.8em solid red;
  30.         border-radius: 50%;
  31.         height: 10em;
  32.         width: 10em;
  33.         position: absolute;
  34.         left: 16em;
  35.         top: 0;
  36.       }
  37.       .d {
  38.         border: 0.8em solid yellow;
  39.         border-radius: 50%;
  40.         height: 10em;
  41.         width: 10em;
  42.         position: absolute;
  43.         left: 4em;
  44.         top: 7em;
  45.       }
  46.       .e {
  47.         border: 0.8em solid green;
  48.         border-radius: 50%;
  49.         height: 10em;
  50.         width: 10em;
  51.         position: absolute;
  52.         left: 12em;
  53.         top: 7em;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="a"></div>
  59.     <div class="b"></div>
  60.     <div class="c"></div>
  61.     <div class="d"></div>
  62.     <div class="e"></div>
  63.   </body>
  64. </html>

效果图

CSS绝对定位

模态框示例

  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.       heml {
  14.         font-size: 10px;
  15.       }
  16.       header {
  17.         /* 启用flex模式 */
  18.         display: flex;
  19.         background-color: slategray;
  20.         height: 3rem;
  21.       }
  22.       header h2 {
  23.         /* 用flex按比例分区 */
  24.         flex: 1 1 80%;
  25.         text-align: center;
  26.       }
  27.       header a {
  28.         flex: 1 1 20%;
  29.         text-align: center;
  30.       }
  31.       .modal-1 {
  32.         /* 蒙板层,固定定位,全屏显示,上下左右都是0,再加透明度 */
  33.         position: fixed;
  34.         background-color: rgb(88, 90, 90);
  35.         opacity: 0.5;
  36.         top: 0;
  37.         bottom: 0;
  38.         left: 0;
  39.         right: 0;
  40.       }
  41.       .modal-2 {
  42.         /* 登陆框,固定定位,用了百分比值,大概在中间位置 */
  43.         position: fixed;
  44.         top: 30vh;
  45.         left: 40vw;
  46.         border: 1px solid rgb(88, 90, 90);
  47.         background-color: sandybrown;
  48.       }
  49.       .modal-2 .close {
  50.         text-align: right;
  51.       }
  52.       .modal-2 .login {
  53.         text-align: center;
  54.       }
  55.       .modal-2 div:nth-of-type(2) {
  56.         padding: 1rem;
  57.       }
  58.       .modal-2 div:nth-of-type(2) + div {
  59.         padding: 1rem;
  60.       }
  61.       .modal {
  62.         /* 默认模态框不显示 */
  63.         display: none;
  64.       }
  65.     </style>
  66.   </head>
  67.   <body>
  68.     <!-- 页眉部分 -->
  69.     <header>
  70.       <h2>后台管理</h2>
  71.       <a href="">登陆</a>
  72.     </header>
  73.     <!-- 模态框 -->
  74.     <div class="modal">
  75.       <!-- 蒙板 -->
  76.       <div class="modal-1"></div>
  77.       <div class="modal-2">
  78.         <form action="abc.php" method="POST">
  79.           <div class="close"><input type="button" value="关闭" /></div>
  80.           <div>
  81.             <label for="user-name">用户</label
  82.             ><input type="text" id="user-name" placeholder="请填写用户名" />
  83.           </div>
  84.           <div>
  85.             <label for="pwd">密码</label
  86.             ><input type="password" id="pwd" placeholder="请填写密码" />
  87.           </div>
  88.           <div class="login"><input type="button" value="登陆" /></div>
  89.         </form>
  90.       </div>
  91.     </div>
  92.     <script>
  93.       const btn = document.querySelector("header a");
  94.       const modal = document.querySelector(".modal");
  95.       const close = document.querySelector(".close");
  97.       btn.addEventListener("click", setModal, false);
  98.       close.addEventListener("click", setModal, false);
  100.       function setModal(ev) {
  101.         ev.preventDefault();
  102.         let status = window
  103.           .getComputedStyle(modal, null)
  104.           .getPropertyValue("display");
  105.         modal.style.display = status === "none" ? "block" : "none";
  106.       }
  107.     </script>
  108.   </body>
  109. </html>

效果图

本效果用到了JS,因JS不会写,借用老师课堂JS代码

登陆弹窗效果

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