定位之z-index
我们已经知道固定定位(fixed)和绝对定位(absolute)可以让盒子浮起来
相对定位(relactive)虽然不能让盒子浮起来,但也是可以让图层浮起来
那么既然大家都可以浮起来,就会存在一个问题:
最外层到底显示谁的问题?
在这里我先说一下兄弟盒子的概念
父级盒子在同一个盒子里,并且父级盒子都是(没定位或者是相对定位)
问题答案分成3种情况:
1、同一个父级盒子里,依据排序和z-index区分
都在同一个父级盒子里,三种定位的图层显示关系
根据在主体区的位置区分:谁的代码在后面,就显示在上面
并且也可以根据z-index来调整谁显示在外面
z-index大的显示在外面
2、不在同一父级盒子,但是父级盒子属于兄弟盒子,也是依据排序和z-index区分
不在同一个父级盒子里,但是父级盒子还是属于兄弟盒子
也就是说父级盒子都是(没定位或者是相对定位)
那么还是根据谁代码在后面谁显示在上面
也可以根据z-index来改变显示关系
3、不在同一父级盒子,父级盒子也不属于兄弟盒子,显示依据父级盒子的显示来显示,z-index不起作用
不在同一个父级盒子里,父级盒子已经不是兄弟盒子
也就是说父级盒子被抠出来了(固定定位或者绝对定位)
只要是对面的父级显示在你的父级上面
那么不管你怎么调整z-index,你始终显示在他的下面
定位之z-index的更多相关文章
- 快捷定位目录 z武器
z的源码在这里:https://github.com/rupa/z/blob/master/z.sh 1.把源码复制到你的用户目录下的z.sh文件, 2.然后用vim打开.bashrc这个目录,在最后 ...
- 前端2 — CSS — 更新完毕
1.CSS是什么? 指:Cascading Style Sheet --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...
- CSS定位(postion)和移动(float)
5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...
- CSS Positioning(定位)
Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...
- css显示display、可见性visibility、定位position、对齐
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS Position(定位)
CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- CSS:CSS Positioning(定位)
ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
随机推荐
- dts reader
package com.aliyun.dts.connect; import com.alibaba.fastjson.JSONObject; import com.aliyun.drc.client ...
- 返回日期格式:2017-12-03T13:58:58.901Z,判断时间间隔 如 “刚刚”,“一分钟前”,“一小时前”等
后台返回的格式如下: 实现输出如下: 我的处理如下: // 处理数据 2017-11-28T02:41:09.487Z // 请求的时间戳.日期格式按照ISO8601标准表示,并需要使用UTC时间. ...
- CGAffineTransform的使用大概:
1. CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放.旋转和平移操作: transform我们一般称为形变属性,其本 ...
- elk收集tomcat日志
1.elk收集tomcat普通日志: 只在logstash节点增加如下文件,重启logstash即可: cat >>/home/logstash-6.3.0/config/tomcat_t ...
- jsPlumb 基本概念
jsPlumb 基本概念 一.默认属性 Anchor:锚点(连接点位置),可以设置在任何没有锚点的目标上(endPoint) Anchors:设置在connect的源和目标点的连接点位置,默认是 Bo ...
- springmvc+mybatis多数据源配置,AOP注解动态切换数据源
springmvc与springboot没多大区别,springboot一个jar包配置几乎包含了所有springmvc,也不需要繁琐的xml配置,springmvc需要配置多种jar包,需要繁琐的x ...
- 《CNCF × Alibaba云原生技术公开课》知识点自测(三):Kubernetes核心概念
(单选)1.Kubernetes的中文含义是___. A. 船 B.舵手 C.容器平台 D.起重机 (单选) 2.Kubectl是_____. A. 一个与Kubernetes集群进行交互.管 ...
- Python基础——matplotlib库的使用与绘图可视化
1.matplotlib库简介: Matplotlib 是一个 Python 的 2D绘图库,开发者可以便捷地生成绘图,直方图,功率谱,条形图,散点图等. 2.Matplotlib 库使用: 注:由于 ...
- pytorch中F.softmax(x1,dim = -1) dim 取值测试及验证
# -*- coding: utf-8 -*- """ Created on Mon May 27 11:09:52 2019 @author: jiangshan &q ...
- 【C++札记】类的分离式写法
介绍 类的分离式写法,使得代码更加规范,增强了阅读性. 分离式写法的规则: 1.类的变量:写在类的里面 2.成员函数:类中写函数的声明,函数的定义写在类体外. 3.写在类外函数定义时,类名前加限定(O ...