如果三个 div 全部设置 position: absolute; 绝对定位，且未设置 z-index，  则从代码结构上    下面的元素 会盖住 上面的元素。

z-index 层级：

  • 通过 z-index 属性 设置元素的 层级。
  • z-index : 正整数;
  • 层级越高 ，越优先显示在最上面。
  • z-index: 1;    大于    没设置 z-index 的元素
  • 对于没有开启定位的元素，z-index 无效。
  • 父元素层级再高，也不会盖住子元素。

__x__(35)0908第五天__ 层级 z-index的更多相关文章

  1. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  2. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  3. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  4. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  5. __x__(35)0908第五天__opacity 透明度

    opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以 ...

  6. __x__(36)0908第五天__背景 background

    1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...

  7. __x__(40)0909第五天__表格 table 的 css 样式 美化

    如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...

  8. __x__(41)0909第五天__长表格

    长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...

  9. __x__(32)0908第五天__Photoshop的基本操作

    1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + ...

随机推荐

  1. 第八节：常见安全隐患和传统的基于Session和Token的安全校验

    一. 常见的安全隐患  1. SQL注入 常见的案例: String query = "SELECT * FROM T_User WHERE userID='" + Request ...

  2. [再寄小读者之数学篇](2014-06-20 求极限---Jordan 不等式的应用)

    证明: 当 $\lm<1$ 时, $\dps{\lim_{R\to+\infty} R^\lm\int_0^{\pi/2} e^{-R\sin\tt}\rd \tt=0}$. 证明: 由 $$\ ...

  3. js检测移动设备并跳转到相关适应页面。

    PS:网页自适应的方式有多种.有通过CSS样式表来实现自适应(主流),也有通过显示不同的页面来实现的方式. 下面代码是记录通过判断设备特征来跳转到相关的页面的方法. 实现要求: 当手机,平板访问 a. ...

  4. Jupyter NoteBook功能介绍

    一.Jupyter Notebook 介绍 文学编程 在介绍 Jupyter Notebook 之前,让我们先来看一个概念:文学编程 ( Literate programming ),这是由 Dona ...

  5. 【webpack】中mini-css-extract-plugin使用方法

    这个参加可以压缩CSS,然后让CSS输出到指定的目录中 使用这个loader也很简单,只有将style-loader 替换成 MiniCssExtractPlugin.loader, 'css-loa ...

  6. day 15 - 2 内置函数练习

    内置函数练习 编写 sql 查询语句功能 文件内容: 1,Eva,22,13651054608,IT2,Vera,23,13304320533,Tearcher3,Renault,25,1333235 ...

  7. Python学习笔记-EXCEL操作

    环境Python3 创建EXCEL,覆盖性创建 #conding=utf-8 import xlwt def BuildExcel(ExcelName,SheetName,TitleList,Data ...

  8. aiohttp使用队列

    获取百度的搜索结果,然后把百度的长链接,获取到真实的url import time import aiofiles import aiohttp import asyncio from lxml im ...

  9. 【easy】112.path sum 113.-----------------

    求是否有从根到叶的路径,节点和等于某个值. /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tree ...

  10. LabVIEW--使用云端编译器编译多个vi

    使用ni 云服务器编译vi 详细请看链接: https://users.niwsc.com/compilecloud/#/ http://www.ni.com/white-paper/52328/en ...