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. Impl模式实现之注意内联

    最近学习muduo源码时,对于内联函数有了更深刻的认知. 内联(inline)在代码执行方面具有优势,但是有时使用不当,或者稍微不注意,就会造成编译错误. 以下将通过Impl实现说明一二: 头文件: ...

  2. 关于mysql的update、delete、和insert into能否使用别名问题

    在工作中遇到这样一个问题,就是mysql在insert into时能不能使用别名,大家会很奇怪为什么insert into使用别名呢?原因在于原来的项目中使用了user表,新项目要将user表拆分为u ...

  3. 浅谈基于WOPI协议实现跨浏览器的Office在线编辑解决方案

    如今,基于Web版的Office 在线预览与编辑功能已成为一种趋势,而关于该技术的实现却成为了国内大部份公司的技术挑战,挑战主要存在于两方面: 其一:目前国内乃至微软本身,还没有相对较为完善的解决方案 ...

  4. 分布式系统监视zabbix讲解八之自动发现/自动注册--技术流ken

    自动发现(LLD) 概述 自动发现(LLD)提供了一种在计算机上为不同实体自动创建监控项,触发器和图形的方法.例如,Zabbix可以在你的机器上自动开始监控文件系统或网络接口,而无需为每个文件系统或网 ...

  5. [转]分别使用Node.js Express 和 Koa 做简单的登录页

    本文转自:https://blog.csdn.net/weixin_38498554/article/details/79204240 刚刚学了Koa2,由于学的不是很深,并没有感受到网上所说的Koa ...

  6. [转]如何在Angular4中引入jquery

    本文转自:https://blog.csdn.net/home_zhang/article/details/77992734 1.anjq是我的项目名称: 在anjq目录下打开dos命令窗口,然后依次 ...

  7. 微信公众号授权，支付，退款总结【shoucang】

    1.支付前准备 1.1首先两个平台接入账户. 商户平台:https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F 公众平台: ...

  8. c#实战开发：以太坊私链搭建（一）

    1.第一步环境搭建 运行环境:window  客户端版本:Go语言geth 下载地址https://ethereum.github.io/go-ethereum/downloads/ 以太坊API中文 ...

  9. .net Core使用Orcle官方驱动连接数据库

    最近在研究.net Core,因为公司的项目用到的都是Oracle数据库,所以简单试一下.net Core怎样连接Oracle. Oracle官方现在已经提供.net Core的官方驱动(预览版),也 ...

  10. 为什么需要把页面放在WEB-INF文件夹下面？

    1.基于不同的功能 JSP 被放置在不同的目录下 这种方法的问题是这些页面文件容易被偷看到源代码,或被直接调用.某些场合下这可能不是个大问题,可是在特定情形中却可能构成安全隐患.用户可以绕过Strut ...