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. monolog 日志

    1 安装 composer require monolog/monolog 2 使用 // 创建日志服务 $logger = new Logger('my_logger'); // 定义一个handl ...

  2. spring boot:实现图片文件上传并生成缩略图(spring boot 2.3.1)

    一,为什么要给图片生成缩略图? 1, 用户上传的原始图片如果太大,不能直接展示在网站页面上, 因为不但流费server的流量,而且用户打开时非常费时间, 所以要生成缩略图. 2,服务端管理图片要注意的 ...

  3. 第十八章 HTTPS介绍及实战演练

    一.HTTPS介绍 1.概述 为什么需要使用HTTPS,因为HTTP不安全,当我们使用http网站时,会遭到劫持和篡改,如果采用https协议,那么数据在传输过程中是加密的,所以黑客无法窃取或者篡改数 ...

  4. 【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender， 如何设置Windows Defender Antivirus服务

    1)Software Protection 与 Windows Defender是两个独立的服务.在Windows 服务中他们的描述分别为 Software Protection Enables th ...

  5. VUE 如何分环境打包(开发/测试/生产)配置

    前言 之前小玲一直处于更新,迭代项目的状态,开发环境.测试环境.生产环境都是前辈配置好的,自己几乎没有配置过,这次做几个新项目时,面临着上线,需要分环境打包配置,于是在网上遨游了一会会,摸索着按照网上 ...

  6. 没事学学KVM（一）

    学习KVM肯定要找来一台虚机来学习呀,通过VMware workstation创建虚机,现在的电脑CPU,包括INTER,AMD都支持,公司发的电脑CPU为inter,通过开启inter VT-X可在 ...

  7. poj 2229 一道动态规划思维题

    http://poj.org/problem?id=2229 先把题目连接发上.题目的意思就是: 把n拆分为2的幂相加的形式,问有多少种拆分方法. 看了大佬的完全背包代码很久都没懂,就照着网上的写了动 ...

  8. Redis分布式锁及分区

    以下内容是翻译的官网文档RedLock和分区部分,可以简单了解分布式锁在redis如何实现及其方式 redis分区的方法 redis实现的分布式锁RedLock算法,分布式锁,即在多个master上获 ...

  9. Iperius Backup Full--小中企业简单自动备份的实用工具

    从事IT行业几个年头了,一直以来发现备份这个词是十分特殊的.无论是事业国有大企央企还是个人爱好者,小型工作室,中小企业. 对于备份都是明确知道十分重要,但在正在实施起来会因为投入,领导重视程度,实施管 ...

  10. Redis常用命令(3)——Hash

    HDEL 格式:HDEL key field [field ...] 作用:删除哈希表中的一个或多个域. 返回值:删除的域的个数. HEXISTS 格式:HEXISTS key field 作用:判断 ...