定位之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 元素可以使 ...
随机推荐
- Linux给力的Shell命令
查看目录下面的所有目录 ls /dev/ -F |grep "/" bus/ disk/ input/ 说明: ls -F命令将文件和目录后面添加一个特定的符号; ...
- 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_15-课程预览功能开发-接口开发
红色部分 定义model 定义api接口 Service 主要分为这几步 定义feignClient 打开cms接口,根据接口来写feignClient Service调用 service调用feig ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_07-动态查询用户权限-权限数据模型
3 动态查询用户权限 3.1 需求分析 截至目前在测试授权时使用的权限数据是静态数据,正常情况的流程是: 1.管理员给用户分配权限,权限数据写到数据库中. 2.认证服务在进行用户认证时从数据库读取用户 ...
- 使用httpwebrequest Post数据到网站
怎样通过HttpWebRequest 发送 POST 请求到一个网页服务器?例如编写个程序实现自动用户登录,自动提交表单数据到网站等.假如某个页面有个如下的表单(Form): <form nam ...
- 【Leetcode_easy】669. Trim a Binary Search Tree
problem 669. Trim a Binary Search Tree 参考 1. Leetcode_easy_669. Trim a Binary Search Tree; 完
- iOS-OC的MRC和ARC内存管理机制
1. Objective-c语言中的MRC(MannulReference Counting) 在MRC的内存管理模式下,对变量的管理相关的方法有:retain,release和autorelease ...
- go gRPC介绍, demo
参考文章: 1. https://www.cnblogs.com/kaixinyufeng/p/9651513.html 2. http://jia-shun.cn/2018/08/12/gRPC/ ...
- 解决Maven依赖本地仓库eclipse报错的问题
一.应用场景 有时候项目报红色的感叹号错误也是由于项目中没有导入相关jar报导致报错 为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具. 但是我的项目在内网 ...
- Memcached stats命令及核心参数
一.stats命令 用来查看服务器的运行状态和内部数据,其中核心的参数有: 1.缓存命中率相关参数: cmd_get:总查询次数 get_hits:命中次数 get_misses:未命中次数 2.使用 ...