`

css z-index层重叠顺序

    博客分类:
  • web
阅读更多

最近在搞一个视频播放的东西,由于引用youku等视频至少有60s的广告非常恶心,于是想弄一个自己的,并且播放自己的广告,如果自己有服务器空间和带宽的话,用ckplayer就再方便不过了,如果没有的话,我是借助的乐视云,像youku也有开放平台,也可以自定制播放器并且去除广告,不过最大的缺点就是要收费的。乐视云提供免费无限视频空间。于是自己上传视频,在引用乐视云的播放地址就可以了,但是显示广告就没有ckplayer这样的方便了。于是就想到了css中的层,用z-index能很好的解决层的问题,但是最后发现,在个别浏览器中还是不行,比如IE系列,最终发现是embed的问题,IE中默认在上方的,解决方法,就是在embed中添加 wmode="transparent" 即可解决问题。

 

 

DIV层、span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSS z-index使用。接下来divcss5介绍z-index从基本属性到设置对象的层叠顺序、重叠顺序,从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

如:
div{z-index:100}
注意:z-index的数值不跟单位。

z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。

二、z-index使用条件

Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要z-index样式属性。

三、z-index应用案例 

为了方便观察z-index样式属性,我们设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100pxcss height为50px

1、案例css代码

  1. /* www.divcs5.com z-index实例 */ 
  2. .divcss5{position:relative;} 
  3. .divcss5-1,.divcss5-2,.divcss5-3 
  4. {width:100px;height:50px;position:absolute;} 
  5. .divcss5-1{z-index:10;background:#000;left:10px;top:10px} 
  6. .divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 
  7. .divcss5-3{z-index:15;background:#00F;left:30px;top:30px} 

2、html代码片段

  1. <div class="divcss5-1"></div> 
  2. <div class="divcss5-2"></div> 
  3. <div class="divcss5-3"></div> 

3、z-index案例截图

div css z-index重叠顺序案例截图
Z-index样式实践实例案例

案例说明:
三个盒子均都使用了绝对定位属性position:absolute样式,并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值,让其错落有致。

Divcss5-1盒子背景为黑色,z-index:10
Divcss5-2盒子背景为红色,z-index:20
Divcss5-3盒子背景为蓝色,z-index:15

为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。

四、z-index总结

我们使用z-index重叠顺序样式,在实际DIV+CSS布局时候我们需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。 

分享到:
评论

相关推荐

    css z-index层重叠顺序使用介绍

    在CSS中,`z-index` 是一个非常关键的属性,用于控制元素的堆叠顺序,尤其是在元素重叠的情况下。这个属性主要用于定位元素,特别是当使用 `position` 属性(如 `absolute` 或 `relative`)时。下面我们将深入探讨 `...

    浅析CSS--元素重叠及position定位的z-index顺序.docx

    在CSS布局中,元素重叠和`position`定位的`z-index`顺序是常见的问题,尤其是在复杂的网页设计中。本文将深入探讨这个问题,以便更好地理解和解决问题。 首先,我们需要理解元素的默认行为。在HTML文档中,元素按照...

    浅析CSS--元素重叠及position定位的z-index顺序.pdf

    在CSS布局中,元素的位置和重叠是一个关键概念,尤其涉及到`position`定位和`z-index`属性时,这些问题往往会让开发者感到困扰。本文将深入探讨元素重叠的背景知识,以及`position`定位下的`z-index`顺序。 首先,...

    css里的z-index的使用

    z-index是CSS中用于控制元素堆叠顺序的属性。在一个网页中,多个元素可能会重叠在一起,这时z-index就用来决定哪个元素应该显示在最上面。这个属性只对定位元素(position属性为absolute、relative或fixed)有效,...

    妙用z-index让一个div显示在最前面

    在网页设计中,CSS的z-index属性是用来控制定位元素重叠时的堆叠顺序的。当页面上的元素通过CSS定位属性(如position: relative; position: absolute; position: fixed; position: sticky;)被设定为相对定位、绝对...

    CSS--z-index详解1

    `z-index`属性在CSS中扮演着至关重要的角色,它定义了元素在页面上的堆叠顺序。简单来说,`z-index`越高,元素越会在其他元素之上显示。但这个规则并非总是如此,理解其工作原理对于创建具有复杂层次的网页布局至关...

    CSS教程:网页布局定位及z-index解释

    在多层元素重叠的情况下,`z-index`决定了哪个元素在前面,哪个在后面。`z-index`的值越大,元素越靠前,反之越靠后。默认情况下,所有没有指定`z-index`的元素都具有`auto`值,这意味着它们在堆叠上下文中的层次...

    margin 负值引起的层级(z-index)问题

    在现代网页设计中,CSS属性z-index用于控制页面元素的堆叠顺序,即层叠上下文。一个元素的z-index值决定了它在页面上的“高度”,或者说是显示层级,拥有更高z-index值的元素会覆盖那些具有较低z-index值的元素。...

    applet z-index 问题

    在网页开发中,Z-Index是一个非常关键的概念,它决定了元素在页面上的堆叠顺序,尤其是在涉及重叠元素时。标题“applet z-index 问题”指出,这个问题涉及到Java小应用程序(Applet)与HTML `div` 元素的Z-Index相互...

    bindtap点击无响应-zindex.rar

    在这个特定的案例中,问题聚焦在`bindtap`事件不生效的情况,这通常与CSS样式有关,特别是`z-index`属性的设置。`z-index`是用于控制元素在垂直于屏幕方向上的堆叠顺序,它在具有`position`值为`relative`、`...

    CSS的z-index实例代码

    在HTML文档中,元素可能会相互重叠,而CSS的z-index属性可以帮助我们控制这些重叠元素的堆叠顺序。 在给出的示例中,演示了如何使用z-index属性控制三个DIV块的堆叠顺序。首先,我们必须了解的是z-index属性只对...

    css3的transform造成z-index无效解决方案

    然而,当使用`transform`时,它会产生一个新的堆叠上下文(stacking context),这可能导致`z-index`的行为变得不可预测,尤其是在涉及元素重叠的情况下。`z-index`通常用于决定在同一父元素内多个定位元素的前后...

    css层与层的重叠

    2. **调整`z-index`值**:通过调整`z-index`的值来控制各层的堆叠顺序,确保想要展示在前面的层具有更高的`z-index`值。 3. **注意点**: - 当使用`absolute`或`fixed`定位时,需要指定`top`、`right`、`bottom`、...

    react-reactzindex轻松地管理全局组件zindex

    在React开发过程中,ZIndex(堆叠顺序)是前端开发者经常遇到的一个问题,尤其是在构建复杂的UI组件时。`react-z-index`库就是为了帮助开发者更好地管理和控制全局组件的ZIndex而设计的。它提供了简单易用的API,...

    jQuery获取css z-index在各种浏览器中的返回值

    其中,`z-index`属性是控制元素在层叠上下文中的堆叠顺序的关键。当多个元素重叠时,`z-index`高的元素会覆盖`z-index`低的元素。在不同的浏览器中,通过JavaScript库如jQuery来获取元素的`z-index`值可能会有不同的...

    深入理解css中position属性及z-index属性1

    `z-index`用于指定元素的堆叠顺序,数值越大,元素越靠前,即在视觉上覆盖其他具有较低`z-index`值的元素。当元素重叠时,`z-index`较高的元素将覆盖`z-index`较低的元素。需要注意的是,只有定位(`position`不是`...

    深入理解css中position属性及z-index属性(推荐)

    例如,我们可以让一个菜单始终固定在页面的顶部,也可以通过改变z-index值来调整页面元素的覆盖顺序。这些布局技巧在制作响应式网页和优化用户交互体验方面非常重要。 举个例子,我们可以使用相对定位来稍微移动...

Global site tag (gtag.js) - Google Analytics