我们已经知道固定定位(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. [Java复习] 分布式高可用-Hystrix

    什么是Hystrix? Hystrix 可以让我们在分布式系统中对服务间的调用进行控制,加入一些调用延迟或者依赖故障的容错机制. Hystrix 的设计原则 对依赖服务调用时出现的调用延迟和调用失败进 ...

  2. 【集成模型】Bootstrap Aggregating(Bagging)

    0 - 思想 如下图所示,Bagging(Bootstrap Aggregating)的基本思想是,从训练数据集中有返回的抽象m次形成m个子数据集(bootstrapping),对于每一个子数据集训练 ...

  3. IfcSlab

    // IfcRoot ----------------------------------------------------------- // attributes: // shared_ptr& ...

  4. osg qt 三维模型加载

    osg::ref_ptr<osg::Node> OSG_Qt_::operateMatrix() { osg::ref_ptr<osg::Group> group = new ...

  5. (五)AJAX技术

    一.定义 AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的 ...

  6. 【Leetcode_easy】796. Rotate String

    problem 796. Rotate String solution1: class Solution { public: bool rotateString(string A, string B) ...

  7. Flutter运行报错 `kernel_snapshot for errors` 解决方案

    Flutter运行报错 `flutter kernel_snapshot for errors`解决方案 当你Flutter项目删除了dart文件如果遇到 target:kernel_snapshot ...

  8. 微服务发展规划(PS 大概分层未细化到具体系统)

    网关层 标准化认证业务前台 前置HTML 基于VUE的浏览器端渲染等特性,完全可以看成一个独立的层业务中台 a. 各个系统的业务功能,以业务功能为单位拆分出的业务服务. b. 配合业务前台所产生的聚合 ...

  9. 【C/C++开发】运算符重载

    c++的一大特性就是重载(overload),通过重载可以把功能相似的几个函数合为一个,使得程序更加简洁.高效.在c++中不止函数可以重载,运算符也可以重载.由于一般数据类型间的运算符没有重载的必要, ...

  10. 多年经验【Parallels Desktop14.0.1 永久激活 】版 推荐苹果mac 虚拟机pmg序列号

    parallels desktop 14 mac 激活码          parallels 13免费密钥 parallels desktop 14 激活码 很多用 MAC 的朋友发现平时离不开 W ...