关于float、absolute,fixed谁的z-index大!

假如浮动也有z-index的话,三者的z-index关系是怎样的呢?

在不手动设置z-index的情况下:fixed>absolute>float,也就是固定定位压住绝对定位,绝对定位会压住浮动元素。

如果把绝对定位的z-index设置为1就能反压住固定定位的元素了(前提是固定定位的元素没设置z-index)

relative就不说了,它都没脱离文档流肯定会被前三者覆盖的

时间: 2024-10-10 15:47:27

关于float、absolute,fixed谁的z-index大!的相关文章

解决absolute fixed元素在安卓唤起虚拟键盘时,元素被挤上来。

//由于安卓虚拟键盘也会占位置,致使页面高度变小,所以absolute fixed元素跟着移动 //防止唤起键盘,导致absolute元素被挤上来 var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; if (isAndroid){//如果是安卓手机的浏览器 var win_h = $(window).height();//关键代码 $(&q

CSS position relative absolute fixed

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的

CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:absolute; 脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级. 固定定位:position:fixed; 这里他所固定的对象是

通过绝对定位absolute="fixed"实现网页内容的固定层效果

在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed"来实现导航栏的固定效果. 学习过bootstrap框架都知道,在为网页设置顶部或底部导航栏时,需要为div或者ul列表设置 class="navbar navbar-fixed-top"或class="navbar navbar-fixed-bottom"的类名, 在

html 元素定位position-relative, absolute, fixed, static

看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用往下看了. 自己接触web这么多年,虽说前端有接触过,但还是没有系统地学习过,和完整的实践过.很多东西是似懂非懂.其实这里就是问题的关键所在. 似懂非懂,其实本质上是不懂的.但是却又自以为懂, 这就是自己给自己设定了个障碍,这个障碍看似无形却比有形的障碍更可怕.因为每个人似乎 总是自以为是的认为自己

position absolute fixed relative static inherit

1 object.style.position="absolute" 2 3 absolute 4 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 5 6 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. 7 8 fixed 9 生成绝对定位的元素,相对于浏览器窗口进行定位. 10 11 元素的位置通过 "left&q

对于position:relative,absolute,fixed的见解:

1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相对于自己原来的位置,还是会占父元素位置 3.switch--absolute,div相对于父元素的位置(要求父元素必须有位置属性,逐级网上寻找),不占父元素位置 原文地址:https://www.cnblogs.com/maidongdong/p/8295822.html

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

前端(HTML/CSS/JS)-CSS编码规范

1. 文件名规范 文件名建议用小写字母加中横线的方式.为什么呢?因为这样可读性比较强,看起来比较清爽 https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer 那为什么变量名不用小写字母加小划线的方式 family_tree 因为下划线比较难敲(shift + -),所以一般用驼峰式命名变量的居多. 引入CSS文件的link可以不用带

9.26-28

1. 复习 标签 (1) 需要大家记,单标签和双标签 (2) 性能上 块标签和行标签 (3) 标签的属性 Css (1) 选择器,* 标签 class id 后代 子代 交集 并集 伪类 结构 (2) 层叠性 选择器权重的计算 ① 选中和选不中 如果没有选中就是继承父级的样式,采用就近原则 选中的话就计算权重,谁的权重大就选谁,如果权重相同,后者会覆盖前者. (3).继承性 样式的属性 font color text line-height 排版 (1) Float (2) Position (