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. 用python自制微信机器人,定时发送天气预报

    0 引言 前段时间找到了一个免费的天气预报API,费了好段时间把这个API解析并组装成自己想用的格式了,就想着如何实现每天发送天气信息给自己.最近无意中发现了wxpy库,用它来做再合适不过了.以下是w ...

  2. SVN+Axure版本管理&协同设计(一)

    1. SVN介绍 2.安装部署 环境介绍:Ubuntu16

  3. 【原】使用vue2+vue-router+vuex写一个cnode的脚手架

    最近喜欢上了markdown的书写方式,所以博客直接写在github上来,点击查看

  4. AndroidStudio意外崩溃,电脑重启,导致重启打开Androidstudio后所有的import都出错

    解决方案: File -> Invalidate Cashes / Restart 重新编译的时候可能会碰到下面的问题: 解决方案: 关闭Android Studio,删掉工程下的.gradle ...

  5. Java NIO的工作方式

    1.BIO带来的挑战 BIO即阻塞IO,不管是磁盘IO,还是网络IO,数据在写入OutputStream或者从InputStream读取时都有可能发生阻塞,一旦有阻塞,当前线程将会被挂起,即线程进入非 ...

  6. 翻译:last_value()函数(已提交到MariaDB官方手册)

    本文为mariadb官方手册:LAST_VALUE()的译文. 原文:https://mariadb.com/kb/en/last_value/我提交到MariaDB官方手册的译文:https://m ...

  7. (void) (&_x == &_y)的作用

    如果有下面这段代码: #define min(x, y) ({ \ const typeof(x) _x = (x); \ const typeof(y) _y = (y); \ (void) (&a ...

  8. pxe+kickstart自动化批量安装系统详解-技术流ken

    前言 pxe+kickstart是一款可以实现自动化批量安装系统的服务,比较经典,下面将详细介绍此服务的安装和使用. 系统环境准备 系统版本:CentOS release 6.7 (Final) 内网 ...

  9. DNS工作原理

    一.简述dns DNS(domain name system)域名系统或者(domain named system)区域名称服务,分为正向与反向域名解析,适用C/S,端口路53/udp,53/tcp, ...

  10. 编写你的第一个 Java 版 Raft 分布式 KV 存储

    前言 本文旨在讲述如何使用 Java 语言实现基于 Raft 算法的,分布式的,KV 结构的存储项目.该项目的背景是为了深入理解 Raft 算法,从而深刻理解分布式环境下数据强一致性该如何实现:该项目 ...