search

博客列表 >CSS定位类型和弹出层效果

CSS定位类型和弹出层效果

葵花宝典
葵花宝典原创
2020年12月24日 18:14:34904浏览

元素的定位属性是 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代码

登陆弹窗效果

上一条：实现仿京东商城移动端首页下一条：SEO到底该怎么做，你真的了解吗？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多