微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > CSS定位类型和弹出层效果
博主信息
博文 19
粉丝 0
评论 6
访问量 23240
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS定位类型和弹出层效果
葵花宝典
原创
1117人浏览过

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

登陆弹窗效果

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录