position 属性和 z-index 属性对页面节点层级影响的例子

最新推荐文章于 2024-04-24 21:13:53 发布
最新推荐文章于 2024-04-24 21:13:53 发布
阅读量619 收藏
点赞数
分类专栏： 前端 文章标签： css

原文

position 属性和 z-index 属性对页面节点层级影响的例子

该页面的内容是对文章《 CSS z-index 使用方法和层级树 》的补充, 举例说明 position 属性和 z-index 属性对页面节点层级影响.

不设 z-index 属性

例 1.1

A{}

B{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.1.html" style="width: 175px; height: 150px;"> 例 1.2

A{
  position:static;
}

B{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.2.html" style="width: 175px; height: 150px;"> 例 1.3

A{
  position:relative;
}

B{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.3.html" style="width: 175px; height: 150px;">
例 1.4

A{
  position:absolute;
}

B{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.4.html" style="width: 175px; height: 150px;"> 例 1.5

A{
  position:eixed;
}

B{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.5.html" style="width: 175px; height: 150px;"> 例 1.6

A{}

B{}

A-1{
  position:relative;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/1.6.html" style="width: 175px; height: 150px;">

单层节点

例 2.1

A{
  z-index:2;
}

B{
  z-index:1;
}

C{
  z-index:0;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/2.1.html" style="width: 175px; height: 200px;"> 例 2.2

A{
  z-index:2;
}

B{
  position:relative;
  z-index:1;
}

C{
  position:relative;
  z-index:0;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/2.2.html" style="width: 175px; height: 200px;"> 例 2.3

A{
  z-index:1;
}

B{
  position:relative;
  z-index:0;
}

C{
  position:relative;
}

D{
  position:relative;
  z-index:0;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/2.3.html" style="width: 175px; height: 200px;">

双层节点

例 3.1

A{
  position:relative;
  z-index:1;
}

A-1{}

B{
  position:relative;
  z-index:0;
}

B-1{}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/3.1.html" style="width: 175px; height: 200px;"> 例 3.2

A{
  position:relative;
  z-index:0;
}

A-1{
  position:relative;
  z-index:2;
}

B{
  position:relative;
  z-index:0;
}

B-1{
  position:relative;
  z-index:1;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/3.2.html" style="width: 175px; height: 200px;"> 例 3.3

A{
  position:relative;
  z-index:2;
}

A-1{
  position:relative;
  z-index:0;
}

B{}

B-1{
  position:relative;
z-index:1;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/3.3.html" style="width: 175px; height: 200px;">

多层节点

例 4.1

A{
  position:relative;
  z-index:0;
}

A-1{
  position:relative;
  z-index:100;
}

B-1{
  position:relative;
  z-index:0;
}

B-1-1{
  position:relative;
  z-index:10;
}

C-1-1{
  position:relative;
  z-index:0;
}

C-1-1-1{
  position:relative;
  z-index:1;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/4.1.html" style="width: 175px; height: 200px;"> 例 4.2

A{
  position:relative;
  z-index:0;
}

A-1{
  position:relative;
  z-index:100;
}

B-1{
  position:relative;
}

B-1-1{
  position:relative;
  z-index:10;
}

C-1-1{
  position:relative;
  z-index:0;
}

C-1-1-1{
  position:relative;
  z-index:1;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/4.2.html" style="width: 175px; height: 200px;"> 例 4.3

A{
  position:relative;
  z-index:0;
}

A-1{
  position:relative;
  z-index:100;
}

B-1{}

B-1-1{
  position:relative;
  z-index:10;
}

C-1-1{
  position:relative;
  z-index:0;
}

C-1-1-1{
  position:relative;
  z-index:1;
}		 frameborder="0" marginwidth="0" marginheight="0" src="http://www.neoease.com/tutorials/z-index/4.3.html" style="width: 175px; height: 200px;">
扎实地在跑步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 803
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
热门推荐
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
定位层(position, z-index)
wangtao的博客
01-16 2456
定位层(脱离了普通文档流) 1.定位层是由html元素(标签)形成的一个特殊的box盒子; 其重点在由"定位",而html元素(标签)的定位由css来控制， 通常情况下，html元素(标签)默认的定位方式叫作"静态定位"， 存在于普通文档流中，而定位层是指的那些修改了定位方式的box, 即非静态定位的box; 2.定位层的...
HTML+CSS要点6：position定位与层级关系
斜光的博客
02-06 2956
1 层级z-index 同级元素情况 定位会提高层级，除了static 后面的定位元素层级，高于前面的定位元素层级 嵌套元素情况 子级的层级高于父级的层级 改变层级的属性：z-index: 1; 默认：0； 特性： 只能加给定位元素 数值越大层级越高，可以接受负数 建议同级元素之间比较层级 2 包含块的概念和作用( 包含块就是定位父级 ) 包含块是绝对定位的基础，包含块就是为绝对定...
position中z-index问题
zyl_lyr1019的专栏
11-08 2635
本文主要是参考了他人关于z-index这个属性在ie6下的bug，加入了一些自己的理解。 z-index这属性在大多数浏览器下，还算是中规中矩的，没有太多的兼容问题（我很少见到...），不过在ie6下，就有两个很大的问题，非常影响界面显示的哦！ ie6下z-index属性不起作用的情况： 直接上代码吧。 #blank{width:100%; height:600px; bac
z-index 必须在设置position属性的时候才有效果
luckyGirlIT的博客
07-08 2764
注意： 必须设置position属性才能用z-index
CSS：position属性和z_index
KaiSarH
11-20 435
position属性和z_index
CSS z-index 层级关系优先级的概念
12-13
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
echart树图设置层级距离_小程序echart图层级显示问题
weixin_32238435的博客
01-14 585
前言使用过echart插件开发小程序的同学，应该都会遇到这个问题。尤其常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会穿透所固定的顶部，并且无论你怎么给顶部区域设置css的z-index都是无效的。来看下案发现场例子：其实微信官方有写到，诸如canvas，video等组件是使用客户端创建的原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6345
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
盒子模型定位属性（position、z-index等）
最新发布
w6437286的博客
04-24 444
本章主要讲了盒子模型的定位属性position、z-index等。
前端基础(十三)_定位position、定位层级z-index
见贤思齐焉，见不贤内自省
12-20 1887
定位position、定位层级z-index
position定位及z-index的使用
BigDaddy233333的博客
11-10 1088
使用前提 z-index只能在position属性值为relative或absolute或fixed的元素上有效。 基本原理 z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。 使用的相对性 z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆...
深入理解css中position属性及z-index属性
weixin_33835103的博客
11-29 619
深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一部分：...
position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。
AIWWY的博客
03-18 1733
目录 position属性含义 absolute relative fixed z-index含义 比较规则 注意 position属性含义 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 absolute 设置后处在原本出生位置，定位是相对设置了absolute、relative或fixed的上级元素进行定位，当所有的父级都无这些属性时，相对整个页面设置，不是相对body，因为body4面
index控制器中的index操作
10-13 724
index.php类初始化以后，默认执行indexOp()操作： public function indexOp(){ //输出管理员信息 Tpl::output('admin_info',$this->getAdminInfo()); //getAdminInfo（）继承于父类SystemControl //输出菜单 $this->getNav('',$...
【CSS】position 定位 和 z-index 层级
qq_45677671的博客
12-28 2824
position概述相对定位：relative绝对定位：absolute固定定位：fixed粘性定位：sticky 概述 position属性用于指定一个元素在文档中的定位方式。 top，right，bottom 和 left 属性则决定了该元素的最终位置。 语法： position：static/absolute/relative/fixed/sticky； 说明： static（默认值）： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父
CSS深度解析：position属性与z-index的运用
"深入理解CSS中的position属性和z-index属性对于网页设计至关重要。本文将详细解析这两大属性，包括static、fixed、relative、absolute四种position属性的用法，以及z-index属性如何控制元素的堆叠顺序。" 在CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值