关于float、absolute，fixed谁的z-index大！

最新推荐文章于 2022-07-23 16:18:47 发布
最新推荐文章于 2022-07-23 16:18:47 发布
阅读量243 收藏
点赞数
原文链接：http://www.cnblogs.com/qdog/p/6896638.html
版权

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

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

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

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

转载于:https://www.cnblogs.com/qdog/p/6896638.html

weixin_30294295
关注
position属性（absolute; relative; fixed)以及相关属性z-index
cqpersonal的博客
10-09 1730
position是定位的一种非常有用的标签，它的属性值有: static（静态定位）、absolute（绝地定位）、relative（相对定位）以及fixed(固定定位）这四种。在使用这中定位时，也经常会遇到一种z-index属性值，它是只属于position的属性值。以下文章主要讲述position的各个属性值的使用，以及它们与z-index的关联。 1.position的绝对定位和相对定位
浮动元素与标准流的文字层叠，绝对定位和固定定位与标准流的文字层叠
Lhy_JL的博客
02-24 602
浮动、绝对定位和固定定位的区别： 绝对、固定定位，浮动都是脱标的。 设置了绝对、固定定位属性的元素类似有 float 元素属性（行内块元素）；例如 p 元素设置position：absolute，可直接设置p的width，height 浮动元素会压住下面的标准流盒子，但是不会压住下面标准流的文字（图片）。 绝对、固定定位会完全压住下面的标准流盒子。 浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果，文字会围绕浮动（float）元素！ 1、首先两个标准的盒子，排列顺序是...
css中的relative absolute fixed z-index
mmmmhello的博客
03-06 412
Relative :原来所处的文档流的位置仍然存在，但是定位为 position的元素脱离了原来的文档流。可以设置top left bottom right 来定位。 Absolute : 脱离文档流，相对于position 为 absolute 或者 relative 的父元素 进行定位。如果没有已经定位的父元素，那么会相对最初的“包含块”。 Fixed:是相对于浏览器窗口的固定定位。 z...
CSS学习记录06相对定位、绝对定位、固定定位和z-index
asdfghjkl_zth的博客
02-08 693
文章目录CSS学习记录06定位6.1相对定位6.3绝对定位6.4z-index CSS学习记录06定位 position 的四个值：static、relative、absolute、fixed。 绝对定位：absolute 和 fixed 统称为绝对定位 相对定位：relative 默认值：static 6.1相对定位 position: relative; 案例： <!DOCTYPE html> <html lang="en"> <head> <meta
将position设置为absolute/fixed元素的特点及Z-index的使用
m0_51865787的博客
07-23 465
元素定位
Css fixed和absolute定位区别
taoerchun的专栏
08-20 2万+
fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化 一般fixed用在遮盖层和固定在页面某个位置，如固定在顶
浮动、定位、伪类、伪元素
m0_62558365的博客
04-21 457
浮动、定位、伪类、伪元素定位浮动浮动特点清除浮动伪类、伪元素伪类伪元素 定位 css有三种定位机制：文档流定位（默认定位）、浮动定位、层定位 定位的简介 定位：是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置 使用position来设置定位 浮动 float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素 值 描述 none 默认值，不浮动，并会显示在其在文本中出现的位置 left 向左浮动 right 向右浮动 inherit 规
div层调整z-index属性无效原因分析及解决方法
09-24
在CSS中，z-index属性只能作用于定位元素，即那些position属性为relative、absolute或fixed的元素。当元素被设置为static时（也是position属性的默认值），其z-index属性将不会生效。这是因为在静态定位的元素上，...
div层调整z-index属性在IE中无效原因分析及解决方法
12-13
在前端开发中，Z-INDEX属性是用于控制页面上元素的堆叠顺序，尤其是在使用绝对定位（absolute）、相对定位（relative）或固定定位（fixed）时。然而，开发者经常遇到在Internet Explorer（IE）浏览器中设置z-index...
css 层叠与z-index的示例代码
11-21
只有当元素设置了定位（`position`属性为`relative`、`absolute`或`fixed`）时，`z-index`才生效。`z-index`可以取正整数、0或负整数。默认情况下，如果没有设置`z-index`或设置为`auto`，则视为0。 例如： ```...
前端面试题HTML+CSS基础篇——三栏布局
xiaomao_wxj的博客
08-08 323
如何实现一个左右宽度固定，中间自适应的三栏布局呢 下面就来介绍一下具体的实现方案吧！ 1. float浮动 2. position定位 3. flex布局 4 1. float浮动
position为fixed时设置z-index失效
重口味码农
11-17 2万+
作为一个假的前端，在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时，二级菜单无法设置有效的z-index，导致菜单隐藏在页面元素之下，明明页面元素的z-index是1，但是无论把菜单的z-index设置为多大，都不管用。查阅了资料，原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给
position:fixed中z-index不起作用
Yang'blog
09-27 1万+
position：fixed；z-index不起作用
定位中fixed的z-index：999；和z-index：0的效果
github_36629330的博客
11-23 3902
1、常用的下拉，固定不动的用法，经常用于导航栏的问题2、下拉，向上覆盖的效果
CSS中的绝对定位(absolute)和z-index的用法
BlueDreamerr的博客
07-11 6935
先把代码贴出来 <!DOCTYPE html> <html lang="en"> <head> <title>absolute</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
CSS中position属性( absolute | relative | static | fixed )详解
热门推荐
雾里看花
04-07 9万+
我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，b
CSS 中 position:absolute 与 z-index 对层次结构影响
快乐就好
06-09 1万+
不使用 position <br />这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. <br />2. 使用 absolute <br /><br />如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠. <br /><br />2.1 未使用 z-index <br /><br />这种情况下,依据它们在HTML文档中声明的顺序层叠,因
深入剖析Oracle与MySQL在事务处理上的差异
最新发布
10-06
在数据库管理系统中，事务处理是确保数据一致性和完整性的关键机制。Oracle和MySQL作为两大主流的数据库系统，在事务处理方面有着各自的特点和差异。本文将从事务的基本概念、隔离级别、锁机制以及事务控制语句等方面，详细探讨Oracle与MySQL在事务处理上的差异，并提供代码示例。 Oracle和MySQL在事务处理上有着各自的特点。Oracle提供了强大的并发控制和隔离级别管理，适合处理复杂的企业级事务。MySQL则以其简单性和灵活性，在Web应用和中小型项目中广泛使用。了解这些差异对于开发者选择合适的数据库系统以及优化事务处理至关重要。通过本文的分析和代码示例，读者应该能够更深入地理解Oracle与MySQL在事务处理上的差异，并在实际应用中做出更合适的选择。
CSS深度解析：z-index属性与层叠顺序
与absolute定位一样，fixed定位的元素也会遵循z-index的层叠规则。 z-index的值可以是整数或auto。整数越大，元素在层叠上下文中的层级越高，越靠近用户。auto意味着元素没有明确的层叠级别，将根据元素的定位类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值