position: static   Z-index 固定是0
position: absolute/relative/fixed   Z-index 有效
在层叠显示上，所有static定位元素看作一个整体，所有绝对定位元素各自成为一层

static ：正常文档流中
relative：在文档流中，但是可相对正常位置定位

absolute：脱离文档流，相对最近的非static父元素定位。有top，left，right，bottom 四个属性，四个属性的默认值是“auto”该值会使得absolute相对“第一个兄弟”元素定位。
fixed：脱离文档流，相对浏览器窗口定位。有top，left，right，bottom 四个属性，四个属性的默认值是“auto”该值会使得fixed相对“第一个兄弟”元素定位。
 

CSS 定位与Z-index的更多相关文章

  1. 有没有想过css定位与xpath的区别

    我是这样理解的, css选择如同你尽可能具体的描述一个元素的形态, 包括他的: 标签, 类, id 以及这些的组合, 目标是尽可能确定元素的唯一坐标 , 以方便选择. 而xpath是根据元素的路径去确 ...

  2. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  3. JS——树形导航菜单（html的ul嵌套，jQuery的css()，show(),hide(),index()等方法）

    必备工具:jquery库文件.我这里用的是1.4版本的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. Relative 定位与Absolute 定位实例

    一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...

  5. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  6. fixed定位与absolute定位

    相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...

  7. Python网络爬虫实战(三)照片定位与B站弹幕

    之前两篇已经说完了如何爬取网页以及如何解析其中的数据,那么今天我们就可以开始第一次实战了. 这篇实战包含两个内容. * 利用爬虫调用Api来解析照片的拍摄位置 * 利用爬虫爬取Bilibili视频中的 ...

  8. UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）

    Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

  9. Web前端技能

    入门必备的技能: 第1项技能:HTML超文本标记语言: 技能要点: HTML文件的结构    HTML文件的编写方法     HTML基本标记    文字与段落标记     框架    使用表单    ...

随机推荐

  1. MySQL 报错ERROR 1054 (42S22): Unknown column 'plugin' in 'mysql.user'

    MySQL  我们在创建用户的时候,可能会遇到以下报错: ERROR 1054 (42S22): Unknown column 'plugin' in 'mysql.user' 说明mysq.user ...

  2. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  3. c++多继承多态

    C++多继承多态的实现 如果一个类中存在虚函数,在声明类的对象时,编译器就会给该对象生成一个虚函数指针,该虚函数指针指向该类对应的虚函数表. 多态的实现是因为使用了一种动态绑定的机制,在编译期间不确定 ...

  4. Python 高度定制化自己的线程类和进程类代码，获取启动进程或线程方法的结果（兼容Py2和Py3）

    #encoding=utf-8 from threading import Thread from multiprocessing import Process import multiprocess ...

  5. preg_replace的一些细节

    .$pattern是数组,$replace也是数组,则中对应的 元素进行替换 php preg_replace有五个参数,有三个是必须参数 Preg_replace(mixed $pattern, m ...

  6. 【shiro】(3)---了解Shiro

    了解Shiro 一Apache Shiro作用 Apache Shiro是一个功能强大且易于使用的Java安全框架,可执行身份验证,授权,加密和会话管理,令行应用程序. Shiro提供了应用程序安全A ...

  7. Elasticsearch实践（三）：Mapping

    版本:Elasticsearch 6.2.4. Mapping类似于数据库中的表结构定义,主要作用如下: 定义Index下字段名(Field Name) 定义字段的类型,比如数值型,字符串型.布尔型等 ...

  8. arcgis 加载png图片实现图片跟随地图缩放 和图片的动态播放

    效果图: 主要原理: png加载到地图上是不可能的, 图像本身是没有地理信息的. 这里采用一种办法, 在地图上创建一个图形图层, 图形图层放一个矩形,给这个矩形用一个图片填充符号填充. 关键技术点: ...

  9. SHELL脚本--变量(基础)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$ ...

  10. Perl处理数据(二)：tr和y///

    tr和y///是等价的.用来实现一一映射,但也有额外的功能,就像Linux下的tr命令一样. 用法: tr/SEARCH/REPLACEMENT/cdsr y/SEARCH/REPLACEMENT/c ...