1.z-index

　　　　（1）z轴。数值越大，越靠近你

　　　　（2）只能作用于定位过的标签元素

　　　　

　　应用示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>05丐版模特框</title>

    <style>

        .cover {

            position: absolute; /* 绝对定位 */

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background-color: rgba(0, 0, 0, 0.5);

            z-index: 999;

        }

        .modal {

            width: 600px;

            height: 400px;

            background-color: white;

            position: fixed;

            top: 50%;   /* 据上百分之50 */

            left: 50%;  /* 据下百分之50 */

            margin-top: -200px;     /* 在向上挪动自己高一半的位置 */

            margin-left: -300px;    /* 在向左挪动自己宽一半的位置 */

            z-index: 1000; /* 要靠近你,比下面那层要靠近用户 */

        }

    </style>

</head>

<body>

<div class="modal"></div>

<div class="cover"></div>

</body>

</html>

CSS z-index应用靠近用户的框的更多相关文章

  1. css ul dl dt 表格分页 文本框样式

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  3. ZH奶酪：纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  4. 前端基础之CSS(浮动-解决溢出-实现个人头像框)

    目录 一:浮动float 1.什么是浮动? 2.浮动的作用 3.浮动有两个特点 4.float格式 二:代码实现左右浮动边框 三:浮动造成父标签塌陷问题(清除浮动) 1.浮动会造成父标签的影响 三:清 ...

  5. DIV+CSS实现左侧带三角形的提示框

    实现效果

  6. css 自定义checkbox多选复选框样式

    html: <input type="checkbox" id="" value="">菜单1 <input type=& ...

  7. div+css做出带三角的弹出框 和箭头

    一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...

  8. css文本内容大于内本显示框设置其显示方式

    1. <style type="text/css"> .text-ellipsis{ overflow: hidden;//隐藏滚动条 white-space: now ...

  9. css实现带边框的冒泡提示框

    需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...

随机推荐

  1. LUMEN框架多数据库连接配置方法

    LUMEN作为一款API导向很浓的框架,配置极简化,默认只支持一路DB配置 然而随着业务复杂度的提高,引入多个数据库连接似乎无法避免,下面介绍一下LUMEN连接多个数据库的配置方法: 修改.env文件 ...

  2. 说明资源路径位置类型无法解析The type javax.servlet.http.HttpServletResponse cannot be resolved.

    导入dispatch项目后报错: 解决办法:在项目上单击鼠标右键>  Add Libraries  选择 Server Runtime,下一步  选中Apache Tomcat7 完成  切换标 ...

  3. .Net Core 3.0 MVC 中使用 SqlSugar ORM框架

    介绍 SqlSugar 是一款简单易用的ORM ,在国内市场占有率也比较高, 在今年10月份官网改版后  提供了完整的服务,让您的项目没有后顾之忧 下载地址 :https://github.com/s ...

  4. linux mkfifo命令基本用法

    首先了解linux命令执行顺序 通常情况下,终端只能执行一条命令,然后按下回车,那么执行多条命令呢 顺序执行多条命令,可以用分号; cmd1;cmd2;cmd3 条件执行多条命令,使用&&am ...

  5. plsql查询中文乱码

    1.查看数据库字符集 select userenv('language') from dual 查看数据库字符集 2.在环境变量中添加并设置变量 变量名:NLS_LANG: 变量值:第一步查询的数据库 ...

  6. CyclicBarrier（循环栅栏）

    CyclicBarrier public class CyclicBarrierDemo { public static void main(String[] args) { CyclicBarrie ...

  7. Distcp 跨集群同步

    date: 2020-10-09 17:45:00 updated: 2020-10-10 17:45:00 Distcp 跨集群同步 1. 使用方法及原理 hadoop distcp srcPath ...

  8. 重新开始记录java教程

    最近在工作上学到了很多的知识和经验,以后每天都来记录给博客园上面

  9. 在国内使用Google验证码reCaptcha

    如今各大网站都不可缺少的一部分就是验证码,验证码具有防止恶意批量操作,保护账户安全等作用.但是现在各种暴力破解验证码的手段层出不穷,验证码的保护也就失去了意义.所以各大平台为了应对这种情况也是使用类似 ...

  10. CodeForces 1426F Number of Subsequences

    题意 给定一个长度为 \(n\) 的串,只包含 abc 和通配符.通配符可以替换 abc 的一个.求所有得到的字符串中子序列 abc 出现的次数,对 \(10^9+7\) 取模. \(\texttt{ ...