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. 基于Docker的MySql

    MySQL Server安装教程 考虑到实际情况需要经常使用MySQL,为了方便大家能够快速基于Docker搭建MySQL这里以Linux下为例 进行说明,对于Windows用户来说直接通过查看官网H ...

  2. 微信小程序项目wx-store代码详解

    这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...

  3. HTML <del> 标签

    HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month  is <del>25</del> 30 day ...

  4. JavaSE学习笔记01注释、标识符与基本类型

    1. HelloWorld 编写代码 public class Hello{ public static void main(String[] args){ System.out.println(&q ...

  5. 【Azure云服务 Cloud Service】如何在部署云服务Cloud Service时候通过启动任务Start Task来配置IIS (如开启ARR)

    问题情形 通过VS部署Cloud Service时,需要在开始任务时候安装或配置其他任务,如安装及配置ARR. 执行步骤 1) 下载 requestRouter_amd64.msi 和 webfarm ...

  6. Chimm.Excel —— 使用Java 操作 excel 模板文件生成 excel 文档

    Chimm.Excel -- 设置模板,填充数据,就完事儿了~ _____ _ _ _____ _ / __ \ | (_) | ___| | | | / \/ |__ _ _ __ ___ _ __ ...

  7. 手把手教你使用 Nginx Ingress 实现金丝雀发布

    概述 本文将介绍如何使用 Nginx Ingress 实现金丝雀发布,从使用场景分析,到用法详解,再到上手实践. 前提条件 集群中需要部署 Nginx Ingress 作为 Ingress Contr ...

  8. js 重排和重绘

    1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如 ...

  9. 关于查看本机ssh公钥以及生成公钥

    1.查看本机公钥: 打开git bush,执行  cd ~/.ssh  进入.ssh文件夹(C:\Users\Administrator\.ssh) 执行  ls  命令,查看列表 执行 cat id ...

  10. Luogu P3200 [HNOI2009]有趣的数列

    题意 给定 \(n\),求有多少个长度为 \(2n\) 的排列 \(p\) 满足 对于 \(1\leq i\leq n\),\(p_{2i-1}<p_{2i}\). \(p_1<p_3&l ...