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. 本地ssh快速登录 ssh免密登录

    每次登录都要ssh -p wang@xx.xx.xx.xx 虽然做了公钥验证 https://www.cnblogs.com/php-linux/p/10795913.html 不需要输入密码,但是每 ...

  2. 第三十四章 Linux常规练习题(一)参考答案

    一.练习题一 1.超级用户(管理员用户)提示符是___#_,普通用户提示符是___$_. 2.linux关机重启的命令有哪些 ? 关机命令 重启命令 shutdown -h now shutdown ...

  3. JS时间扩展插件

    前言 原生JS有些没定义的方法只能自己封装了,比如获取现在相隔本年过了几天以及过了多少周,这些都是原JS里没有的方法,现在插件只有一些方法,后期再慢慢扩展 插件使用方法 引用TimeToPack.js ...

  4. 简单又强大的pandas爬虫 利用pandas库的read_html()方法爬取网页表格型数据

    文章目录 一.简介 二.原理 三.爬取实战 实例1 实例2 一.简介 一般的爬虫套路无非是发送请求.获取响应.解析网页.提取数据.保存数据等步骤.构造请求主要用到requests库,定位提取数据用的比 ...

  5. 在Linux系统中安装Chrome浏览器

    前言:作为一个Web开发人员,经常与我们相伴的必然少不了浏览器,而Google旗下的chrome浏览器更是凭借着出色的性能.简洁的界面被广大开发者所喜爱,今天分享下如何在linux系统下安装chrom ...

  6. drf 视图使用及源码分析

    前言 drf视图的源码非常的绕,但是实现的功能却非常的神奇. 它能够帮你快速的解决ORM增删改查的重复代码,非常的方便好用. 下面是它源码中的一句话: class ViewSetMixin: &quo ...

  7. drf 认证校验及源码分析

    认证校验 认证校验是十分重要的,如用户如果不登陆就不能访问某些接口. 再比如用户不登陆就不能够对一个接口做哪些操作. drf中认证的写法流程如下: 1.写一个类,继承BaseAuthenticatio ...

  8. 使用 Dockerfile 文件但是不使用缓存生成镜像

    前一段时候使用 Dockerfile 重新部署 NetCore3.1 项目的时候很顺利,由来由于一些原因,我把以前的镜像删除,如果我们大家继续使用 docker  build 命令去生成镜像的话就会报 ...

  9. 【Luogu】P1402 酒店之王 题解

    原题链接 这道题,很明显是个配对问题.于是,我们可以想到用网络最大流来做. 先整理一下题目条件. 很明显,根据贪心思想,要使最多人满意,每个人应该最多睡一个房间(似乎也没有人能睡两个房间),吃一道菜. ...

  10. CF1295E Permutation Separation

    线段树 难得把E想出来,写出来,但却没有调出来(再给我5分钟),我的紫名啊,我一场上紫的大好机会啊 首先考虑是否能将$k$在$1$--$n-1$的每一个的最小代价都求出来 因为$k$从$i$到$i-1 ...