将position设置为absolute/fixed元素的特点及Z-index的使用

已于 2022-07-25 13:51:41 修改
阅读量438 收藏
点赞数
分类专栏： 笔记 文章标签： html css 前端
于 2022-07-23 16:18:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51865787/article/details/125949177
版权

一，可以随便的设置宽高

二，宽高默认由内容决定

三，不再受标准流的约束

	不再严格按照从上到下、从左到右排布
	不再严格区分块级、行内级、行内块级的很多特性都会消失

不再给父元素汇报宽高数据

	例如div包裹span元素，给子元素设置为absolute，span元素就会脱离文档流，div元素就不能被元素撑起，因而不显示。

脱标元素内部默认还是按照标准流布局

Z-index的使用

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）。
取值可以是正整数、负整数、0

katy perry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS元素的层叠与z-index设置
12-11
我们在文章的更新中，特别注重对新手的辅导，但jb51.net面对的是广大的开发人员，大家可能会遇到各种各样的问题，有些问题很不常见，或者应用的很少，但我们依然有必要学习更多的CSS布局知识与技术，以应对可能出现的复杂多变的CSS内外形势（挺汗）。今天这篇文章，主要介绍了元素的层叠与z-index设置，希望对您有所帮助，更多的知识，请多多参考jb51.net的教程。 声明 　　定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。　　平台：win/IE win/FF z-index: 　　用来确定定位元素在垂直于显示屏方向（以下称
深入理解css中position属性及z-index属性(推荐)
01-19
在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。 第一部分：position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。 如html代码如下： <div class=content
CSS 绝对定位 position:absolute、z-index 设置堆叠顺序
最新发布
小楼一夜听春雨，深巷明朝卖杏花
03-18 1372
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
CSS 中 position:absolute 与 z-index 对层次结构影响
weixin_30677617的博客
03-19 93
不使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. 2. 使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠. 2.1 未使用 z-index 这种情况下...
position ： fixed z-index 失效
tao__f的博客
02-24 943
如图： 登录组件fixed 显示在上层 bug： 父组件设置了fixed 而登录组件（子组件）z-index无论设置多大都没效果 解决： 父组件设置z-index so，请注意下面两点： z-index只有在设置了position为relative,absolute,fixed时才会有效。 z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。 ...
position为fixed时设置z-index失效
热门推荐
重口味码农
11-17 2万+
作为一个假的前端，在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时，二级菜单无法设置有效的z-index，导致菜单隐藏在页面元素之下，明明页面元素的z-index是1，但是无论把菜单的z-index设置为多大，都不管用。查阅了资料，原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给
position属性（absolute; relative; fixed)以及相关属性z-index
cqpersonal的博客
10-09 1690
position是定位的一种非常有用的标签，它的属性值有: static（静态定位）、absolute（绝地定位）、relative（相对定位）以及fixed(固定定位）这四种。在使用这中定位时，也经常会遇到一种z-index属性值，它是只属于position的属性值。以下文章主要讲述position的各个属性值的使用，以及它们与z-index的关联。 1.position的绝对定位和相对定位
position设置定位属性 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位 z-index设置定位元素的层叠顺序 锚点链接 透明
Lgw_zuiyouxiu的博客
07-17 753
1.position 设置定位属性 static 默认值，没有定位，静态定位，相对没有属性position属性的元素都是static定位 2.absolute 绝对定位 会使元素脱离文档流，不需要去解决 绝对定位会产生一个块级框，不管之前是何种元素，都可以设置宽高 包含块：根据距离其最近的具有定位设置的父元素进行位置的偏移， 静态定位除外，如果所有的父元...
CSS定位-6.1定位属性-使用position属性来表示定位-static、relative、absolute、fixed---z-index该属性只有在position值为absolute时才有效
qq_44280574的博客
09-01 947
1.定位属性 定位属性用于设置元素在页面中的位置 使用position属性来表示定位 它的值可以设置为 static（标准流布局）、relative（相对布局）、absolute（绝对布局）、fixed（固定布局） 默认值为static，表示标准流布局 2.定位位置 在使用 1.定位属性 定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置 top用于设置元素定位时距离上部的偏移距离 bottom用于设置元素定位时距离下部的偏移距离 left用于设置元素定位时距离左侧的偏移距离 right用于设置元
CSS教程:元素层叠级别及z-index
01-21
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FF z-index: 用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序 值：　auto | 整数 | ...
div层调整z-index属性无效原因分析及解决方法
01-19
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况...
关于float、absolute，fixed谁的z-index大！
weixin_30294295的博客
05-23 232
假如浮动也有z-index的话，三者的z-index关系是怎样的呢？ 在不手动设置z-index的情况下：fixed>absolute>float，也就是固定定位压住绝对定位，绝对定位会压住浮动元素。 如果把绝对定位的z-index设置为1就能反压住固定定位的元素了（前提是固定定位的元素没设置z-index） relative就不说了，它都没脱离文档流肯定会被前三者覆盖的 转载于...
css absolute z index,CSS Z-Index不能用于绝对定位
weixin_39785286的博客
08-04 303
.forum_post_outside {border: none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;min-height: 75px;padding: 0 5px;width: 100%;background-color: #333;margin-bottom: 2px;}.forum_arrow_ou...
【CSS】position 定位 和 z-index 层级
qq_45677671的博客
12-28 2444
position概述相对定位：relative绝对定位：absolute固定定位：fixed粘性定位：sticky 概述 position属性用于指定一个元素在文档中的定位方式。 top，right，bottom 和 left 属性则决定了该元素的最终位置。 语法： position：static/absolute/relative/fixed/sticky； 说明： static（默认值）： 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父
fixed定位嵌套导致无法覆盖其他元素
天心天地生的博客
12-16 2142
问题描述 fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>css 定位</title> </head> <body> <style> .root {
【absolute和Z-index对层级关系的影响】
m0_64288219的博客
06-07 767
有时候我们使用absolute绝对定位和z-index，来调整元素的位置与层级关系，可总是遇到一些出乎我们意料的状况，不知道大家有没有碰到和我一样的问题。话不多说，上代码这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index
父元素设置了position: fixed;top: 0;的z-index失效应该怎么办
05-28
的情况下，z-index失效有可能是由于父元素的后代元素（子元素或孙元素等）设置了position: relative或者position: absolute，从而导致了z-index失效。 解决方法如下： 1. 父元素设置z-index值时，应该给它设置一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值