定位层(position, z-index)

最新推荐文章于 2024-04-24 21:13:53 发布
最新推荐文章于 2024-04-24 21:13:53 发布
阅读量2.4k 收藏
点赞数
分类专栏： Html&Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29393273/article/details/86409042
版权
本文深入探讨了CSS中的定位层原理，详细解释了position属性的使用，包括static、relative、absolute和fixed。同时，重点介绍了z-index如何决定元素的堆叠顺序，以及在创建复杂布局时如何巧妙地调整z-index实现层级控制。通过实例分析，帮助读者掌握这些关键概念，提升前端开发技能。
摘要由CSDN通过智能技术生成
定位层(脱离了普通文档流)
  1.定位层是由html元素(标签)形成的一个特殊的box盒子;
    其重点在由"定位",而html元素(标签)的定位由css来控制，
    通常情况下，html元素(标签)默认的定位方式叫作"静态定位"，
    存在于普通文档流中，而定位层是指的那些修改了定位方式的box,
    即非静态定位的box;
  2.定位层的"定位"需要根据参照对象来实现定位的位置;
  3.定位层的主要作用是用来实现小范围内容元素的排版和定位;

定位属性position

 作用:规定html元素的定位类型;

值 说明 参照物
static (默认值)静态定位 无定位，html元素出现在默认文档流中，是默认的定位方式;
absolute  绝对定位 相对于非static定位的第一个父元素进行定位;
relative 相对定位  相对自身在默认文
最低0.47元/天 解锁文章
pro_12306
关注
专栏目录
定位position和z-index
weixin_44011306的博客
06-27 217
定位position和z-index相对定位 relative相对定位微调小技巧绝对定位 absolute绝对定位微调小技巧固定式定位 fixedz-index 设置层级优先级 相对定位 relative 默认情况下元素 position 为 static，作为标准文档流的一部分，设置 relative 可转换为相对定位元素，该元素原本所占的空间（文档流）仍保留，之后可以通过设置垂直或水平位置，让这个元素相对于它的起点进行位移，exp： #box_relative { position: relat
深入理解css中position属性及z-index属性
weixin_33835103的博客
11-29 626
深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一部分：...
position中z-index问题
zyl_lyr1019的专栏
11-08 2639
本文主要是参考了他人关于z-index这个属性在ie6下的bug，加入了一些自己的理解。 z-index这属性在大多数浏览器下，还算是中规中矩的，没有太多的兼容问题（我很少见到...），不过在ie6下，就有两个很大的问题，非常影响界面显示的哦！ ie6下z-index属性不起作用的情况： 直接上代码吧。 #blank{width:100%; height:600px; bac
position定位及z-index的使用
BigDaddy233333的博客
11-10 1091
使用前提 z-index只能在position属性值为relative或absolute或fixed的元素上有效。 基本原理 z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。 使用的相对性 z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆...
定位层
我行我能
12-14 746
.f1 { position: relative; clip:rect( ) }把层放于表格中，其层运用:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">#Layer3 { position:absolute; width:200px; height:115
CSS 定位之 z-index 问题分析
01-19
position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au
CSS position属性与z-index属性
TENET_T的博客
10-07 288
1.position属性 position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。 position常用的属性值一般有三种： position: fixed; /*固定定位*/ position: relative; /*相对定位*/ position: absolute; /*绝对定位*/ 接下来分别说明这三个属性的用法及特性，并举例说明。 1.1 固定定位fixed 当元素的position属性被设置为fixed后，可以使用top/right/bottom/left这四个
css中position属性及z-index属性
棠樾的博客
09-16 574
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。 1.position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。 2.positio...
CSS中的z-index属性基本使用教程
12-13
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。 对于定位元素而言，z-index 意味着： 确定该元素在当前层叠上下文中的层叠级别...
CSS-定位层
tz_gx的专栏
11-17 343
定位层由html元素形成的特殊的box盒子 定位层的定位需要根据参照对象来实现定位的位置 定位层的主要作用是用来实现小范围内容元素的排版和定位 static     静态定位    无定位，html元素出现在默认文档流中，是默认的文档方式 absolute   绝对定位    相对于非static定位的第一个父元素进行定位 relative   相对定位    相对自身在默认文档流中的正
浅说position定位及z-index使用
我的博客
11-17 578
z-index属性 z...
CSS中的position和z-index属性
Hsuyeungpeng的专栏
11-11 669
CSS中的position和z-index属性css样式中的position属性定义建立元素布局的定位机制，而z-index 属性设置元素的堆叠顺序，两者配合使用通常被用来定义页面中弹层的布局。
web前端学习笔记（五）—定位层
盖世小可爱的博客
02-19 192
定位层的概念： 1. 定位层是由html元素（标签）形成的一个特殊的box盒子。 2. 其重点在于“定位”，而html元素（标签）的定位方式由CSS来控制。通常情况下，html元素（标签）默认的定位方式叫做“静态定位”，存在于普通文档流中，而定位层则是指的那些修改了定位方式的box，即非静态定位的box。 3. 定位层的“定位”需要根据参照对象来实现定位的位置。 4. 定位层的主要作用是用来实现小范围内容元素的排版和定位。 定位属性 原理：完全脱离页面文档流，独立于立体层面的z轴之上。从立体
position属性及z-index属性
yanner_的博客
07-22 347
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute、sticky。 （1）position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。 （2）fixed定位 fixed定位是指元素的位置相对于浏览器窗口是固定位...
CSS：position属性和z_index
KaiSarH
11-20 442
position属性和z_index
盒子模型定位属性（position、z-index等）
最新发布
w6437286的博客
04-24 446
本章主要讲了盒子模型的定位属性position、z-index等。
前端基础(十三)_定位position、定位层级z-index
见贤思齐焉，见不贤内自省
12-20 1907
定位position、定位层级z-index
position属性（absolute; relative; fixed)以及相关属性z-index
cqpersonal的博客
10-09 1726
position是定位的一种非常有用的标签，它的属性值有: static（静态定位）、absolute（绝地定位）、relative（相对定位）以及fixed(固定定位）这四种。在使用这中定位时，也经常会遇到一种z-index属性值，它是只属于position的属性值。以下文章主要讲述position的各个属性值的使用，以及它们与z-index的关联。 1.position的绝对定位和相对定位
position和z-index的冲突
03-25
A：Position和z-index之间的冲突通常与元素的定位方式和层级顺序有关。当我们使用CSS的Position属性对元素进行定位时，我们可以将元素放置在另一个元素的上方或下方。这就需要使用z-index属性来控制元素的层级顺序。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值