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. Redis6 安装

    在centos7.5服务器上按照官方发布的安装方式并不能进行正确的安装,现收集并整理如下安装方式,亲测有效 1.安装依赖 yum install -y cpp binutils glibc glibc ...

  2. 第二十七章 Linux系统管理之定时任务

    一.定时任务概述 1.含义:设定某个日期或时间周期性执行指令. 2.crond # 守护进程 分钟级别 rond是Linux系统中用来定期执行命令或脚本的一种服务软件,一般情况下,我们安装完CentO ...

  3. Baolu CSV Data Set Config

    1.背景 大家在平常使用JMeter测试工具时,对CSV Data Set Config 配置元件肯定不会陌生.如果我们的压测场景涉及到数据库更新操作(如:转账接接口)则需要对参数化数据进行分块,可就 ...

  4. 对于app监测root权限或者强制升级

    只做分享学习 以下方法对于大多数Root检测的App (不限于仅银行类App),均适用. 另,"主用户 + Island用户" 情况下: 如果App仅安装在 Island下,当绕不 ...

  5. LeakCanary检测内存泄漏

    内存泄漏原因: 线程造成的内存泄漏 Handler造成的内存泄漏 单例导致内存泄露 静态变量导致内存泄露 非静态内部类导致内存泄露 未取消注册(BroadcastReceiver )或回调导致内存泄露 ...

  6. 我天天curd，怎么才能成长？

    起因 "天天在那curd,也没啥技术含量" "你就是一个curd boy" "你就是一个curder啊" "你不写代码,你只是代码 ...

  7. LoadRunner接口脚本web_submit_data编写过程中遇到的问题及分享

    工作中需要接口测试,报文编辑器一条条手工发费时费力,因此考虑利用web_submit_data函数POST方法进行报文编辑.在报文编辑中主要遇到了三个问题,其中一个问题耗时两天查到问题所在,在这里与大 ...

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

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

  9. Day13 CSS样式

    1. css 选择器 1.1 css三种引入方法 <!DOCTYPE HTML> <html> <head> <meta charset="utf- ...

  10. LWJGL3的内存管理，第二篇，栈上分配

    LWJGL3的内存管理,第二篇,栈上分配 简介 为了讨论LWJGL在内存分配方面的设计,本文将作为该系列随笔中的第二篇,用来讨论在栈上进行内存分配的策略,该策略在 LWJGL3 中体现为以 Memor ...