我们已经知道固定定位(fixed)和绝对定位(absolute)可以让盒子浮起来

相对定位(relactive)虽然不能让盒子浮起来,但也是可以让图层浮起来

那么既然大家都可以浮起来,就会存在一个问题:

  最外层到底显示谁的问题?

  在这里我先说一下兄弟盒子的概念

    父级盒子在同一个盒子里,并且父级盒子都是(没定位或者是相对定位)

问题答案分成3种情况:

  1、同一个父级盒子里,依据排序和z-index区分

    都在同一个父级盒子里,三种定位的图层显示关系

    根据在主体区的位置区分:谁的代码在后面,就显示在上面

    并且也可以根据z-index来调整谁显示在外面

    z-index大的显示在外面

  2、不在同一父级盒子,但是父级盒子属于兄弟盒子,也是依据排序和z-index区分

    不在同一个父级盒子里,但是父级盒子还是属于兄弟盒子

    也就是说父级盒子都是(没定位或者是相对定位)

    那么还是根据谁代码在后面谁显示在上面

    也可以根据z-index来改变显示关系

  3、不在同一父级盒子,父级盒子也不属于兄弟盒子,显示依据父级盒子的显示来显示,z-index不起作用

    不在同一个父级盒子里,父级盒子已经不是兄弟盒子

    也就是说父级盒子被抠出来了(固定定位或者绝对定位)

    只要是对面的父级显示在你的父级上面

    那么不管你怎么调整z-index,你始终显示在他的下面

定位之z-index的更多相关文章

  1. 快捷定位目录 z武器

    z的源码在这里:https://github.com/rupa/z/blob/master/z.sh 1.把源码复制到你的用户目录下的z.sh文件, 2.然后用vim打开.bashrc这个目录,在最后 ...

  2. 前端2 — CSS — 更新完毕

    1.CSS是什么? 指:Cascading Style Sheet  --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...

  3. CSS定位(postion)和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  4. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  5. css显示display、可见性visibility、定位position、对齐

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display ...

  6. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  7. CSS Position(定位)

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  8. css总结1:position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  9. CSS:CSS Positioning(定位)

    ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...

  10. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

随机推荐

  1. Ubuntu + Apache2 环境下用C编写 一个简单的cgi脚本

    我只学习过c语言,没有学习过prel,网上很多教程都是针对prel的,很少有针对c的.自己在Ubuntu下鼓捣了一下午,也总算是用c成功编写了一个helloworld的cgi,算是cgi入门的第一步. ...

  2. iis启动异常 0x80072749

    错误提示: “/”应用程序中的服务器错误. 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同 ...

  3. 【Leetcode_easy】830. Positions of Large Groups

    problem 830. Positions of Large Groups solution1: class Solution { public: vector<vector<int&g ...

  4. Levenberg-Marquardt迭代(LM算法)-改进Guass-Newton法

                  1.前言                                a.对于工程问题,一般描述为:从一些测量值(观测量)x 中估计参数 p?即x = f(p),     ...

  5. 安卓计数器类APP推荐

    1. Thing Counter - Google Play 上的应用 可添加多个计数器,同一页面展示,一行一个,操作直观方便: 可以更改计数器颜色,使页面更美观. 每个计数器有详情和历史记录 详情: ...

  6. 【转】JS大总结(带实例)

    JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...

  7. udevdm命令详解

    udevadm 后接一个命令和命令指定选项.它控制了udev运行的行为,处理内核事件,控制事件队列,并且提供简单的调试机制. 选项: --debug 打印错误信息 --version 打印版本信息 - ...

  8. VBA来实现已存在的数据库,取得所有表的结构

    问题描述 用VBA来取出MySQL数据库中的所有表的结构后生成一个Excel的文档 首先创建MySQL的数据源,如何创建数据源在前章已经写过,之后把下面的信息填写上即可 在window7 64位系统上 ...

  9. [转载]Oracle触发器用法实例详解

    本文实例讲述了Oracle触发器用法.分享给大家供大家参考,具体如下: 一.触发器简介 触发器的定义就是说某个条件成立的时候,触发器里面所定义的语句就会被自动的执行. 因此触发器不需要人为的去调用,也 ...

  10. 记:联调安卓设备的神药-无需usb数据线即可直连

    前言 最近需要调试公司的安卓服务,正常情况下,我们调试都是减安卓设备通过usb连接在我们座位旁,再不济就是我们扛笔记本到硬件旁边,这样调试屡试不爽,但是有一天你突然发现你带的数据线因为各种原因总是终端 ...