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. API接口开发（持续更新）

    1. 接口调用失败时的处理方式 接口调用失败时分为 请求失败和业务失败. 请求失败的相关信息可通过HTTP状态码体现出来, 业务失败的相关信息需要在返回数据中体现出来. 2. 分页查询 批量查询时需要 ...

  2. 使用token和redis怎样判断账户是否失效和异地登录

    思路: 将token作为value,账户的id作为key 每次登录都去redis中查询该账户的登录是否过期,没有过期则删掉原来的id,token,将新生成token作为value存入redis中.过期 ...

  3. Python - 关于代码阅读的一些建议

    初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...

  4. Java 中初始化 List 集合的 6 种方式!

    List 是 Java 开发中经常会使用的集合,你们知道有哪些方式可以初始化一个 List 吗?这其中不缺乏一些坑,今天栈长我给大家一一普及一下. 1.常规方式 List<String> ...

  5. 【翻译】ES6生成器简介

    原文地址:http://davidwalsh.name/es6-generators ES6生成器全部文章: The Basics Of ES6 Generators Diving Deeper Wi ...

  6. 有关 Azure 机器学习的 Net# 神经网络规范语言的指南

    Net# 是由 Microsoft 开发的一种用于定义神经网络体系结构的语言. 使用 Net# 定义神经网络的结构使定义复杂结构(如深层神经网络或任意维度的卷积)变得可能,这些复杂结构被认为可提高对数 ...

  7. 从面试连跪到收割offer，回顾我的春招面试历程（研发岗位）

    本文首发于自微信公众号[程序员江湖] 作者How 2 Play Life,985 软件硕士,阿里 Java 研发工程师,在技术校园招聘.自学编程.计算机考研等方面有丰富经验和独到见解,目前致力于分享程 ...

  8. select实现高并发服务器

    前言:周末学了两天网络编程,把之前的不懂一些问题基本掌握了,例如TCP状态转换图.close和shutdown函数的区别.select函数等,今天分享给大家. 一.网络编程基础知识 在写代码之前,需要 ...

  9. web.xml配置web中的key points(上)

    一.定义 定义时注意:xml元素是区分大小写的. <web-app></web-app> 这些必须小写 二.url-pattern 1)url-pattern 的值必须以/或者 ...

  10. Linux 在文件夹的所有文件中查找某字符

    命令: grep -r -e string directory eg: 在 /home 目录下的所有文件中查找包含 test 字符串的文件. grep -r -e "test" / ...