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. Linux主机操作系统加固规范

      对于企业来说,安全加固是一门必做的安全措施.主要分为:账号安全.认证授权.协议安全.审计安全.总的来说,就是4A(统一安全管理平台解决方案),账号管理.认证管理.授权管理.审计管理.用漏洞扫描工具 ...

  2. 多线程 Thread.yield 方法到底有什么用？

    概念 我们知道 start() 方法是启动线程,让线程变成就绪状态等待 CPU 调度后执行. 那 yield() 方法是干什么用的呢?来看下源码. /** * A hint to the schedu ...

  3. localhost无法访问的问题

    localhost无法访问,提示访问超时 ping localhost 和 ping 127.0.0.1 都提示一般故障,如下图 问题原因:windows防火墙故障 解决办法:关闭windows防火墙 ...

  4. 工作随笔—Elasticsearch大量数据提交优化

    问题:当有大量数据提交到Elasticsearch时,怎么优化处理效率? 回答: 批量提交 当有大量数据提交的时候,建议采用批量提交. 比如在做 ELK 过程中 ,Logstash indexer 提 ...

  5. java开发面试问题

    Java面试题:java的垮平台原理 为什么要跨平台使用????? 其实说白了就是个操作系统支持的指令集是不一样的.我们的程序需要再不同的操作系统上运行这些代码. 但是不要说jvm是跨平台的,而真正跨 ...

  6. 课程五(Sequence Models)，第三周（Sequence models & Attention mechanism） —— 1.Programming assignments：Neural Machine Translation with Attention

    Neural Machine Translation Welcome to your first programming assignment for this week! You will buil ...

  7. Docker概念学习系列之详谈Docker 的核心组件与概念（5）

    不多说,直接上干货!   见[博主]撰写的https://mp.weixin.qq.com/s/0omuSAjF5afJBZBxhbKTqQ 想要了解Docker,就必须了解Docker的五大核心概念 ...

  8. zookeeper实现动态感知服务器上下线

      在实际的生产环境中我们一般都是集群环境部署的,同一个程序我们会部署在相同的几台服务器中,这时我们可以通过负载均衡服务器去调度,但是我们并不能很快速的获知哪台服务器挂掉了,这时我们就可以使用zook ...

  9. Perl的命令行参数和ARGV

    程序名:$0 $0表示当前正在运行的Perl脚本名.有3种情况: 如果执行方式为perl x.pl,则$0的值为x.pl而非perl命令本身 如果执行方式为./x.pl,则$0的值为./x.pl 如果 ...

  10. python模块之pickle、shelve、json

    一 什么是序列化 序列化指的是将内存中的数据结构转化为一种中间格式,并存储到硬盘上. (反序列化:将硬盘上存储的中间格式数据再还原为内存中的数据结构) 二 为什么要序列化 持久保持状态 需知一个软件/ ...