css用层级挡不住绝对定位

最新推荐文章于 2023-04-19 17:21:09 发布
最新推荐文章于 2023-04-19 17:21:09 发布
阅读量837 收藏 1
点赞数 1
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1711953058/article/details/115579811
版权

定位使得层级变高的问题

 

今天踩的一个小坑，父元素开启了相对定位，俩个部分的div在父元素下，一个div开启了绝对定位以父元素做视口另一个div想要盖住这个绝对定位的div，但是设置了z-index也盖不住，纠结了半天想要盖的div没设置定位。定位使得元素层级变高又是想要盖住的div下面的兄弟元素。这里给想要盖住定位元素的div开启了定位了在设置z-index就可以盖住了。

在这里插入图片描述

 

总结

在想要盖住有定位的元素，层级要和定位在一起才管用
个人总结，若有不对请评论纠正

 

舒某
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css绝对定位分层,css定位position引发的层级关系问题详解
weixin_35118064的博客
08-03 2608
position定位里的absolute，relative和fixedabsolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。relative：相对定位，相对自己原来的位置进行定位fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化)由posi...
css 相对定位 绝对定位 浮动 分析
09-25
在CSS布局中，定位（Positioning）是一种关键的机制，用于控制元素在页面上的精确位置。本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative ...
绝对定位层级问题
Tx的博客
03-25 734
一、普通情况下：位于代码顺序后面的元素层级更高 二、增加z-index属性的情况下，z-index值越高层级越高 三、在父元素设置元素定位(absolute/fixed/relative)情况下,父元素的z-index层级越高，里面的子元素层级也就越高,侧面证明靠爹的重要性 <!-- 父元素黄色块 --> <view style="position: fixed;background-color: burlywood;width: 100rpx;height: 100rpx; z-inde
css中的绝对定位布局及层级与透明效果
qq_48802281的博客
07-01 935
css中的绝对定位布局及层级与透明效果
CSS中，想要使用z-index层级盖住有定位的元素节点
weixin_39263807的博客
01-18 576
定位使得层级变高的问题 由于下面的“样本检测”后面需要特殊符号，我就在div的前后都加了伪类，让它绝对定位到字的后面，上边是个ul列表，发现不管怎么给ul设置z-index层级都没用 当把“样本检测”的相对定位去掉以后 可是我后面的特殊符号绝对定位就不见了，跑到后面去了，因为父节点集一路都没有设置定位，这个方法不可行，总不能定位跑那么远 又发现，给“样本检测”的div加上z-index=-1...
CSS定位，绝对定位的布局，元素层级
m0_56649557的博客
05-11 837
文章目录定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的层级 定位 在对页面进行布局时除了用到浮动以外，还会用到定位，定位是一种更加高级的布局手段，通过定位可以让元素摆放到页面的任意位置，使用position属性来设置定位。 可选值： static 默认值，元素是静止没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 相对定位 当元素的positio属性设置为relative时则开启了相对定位
CSS--定位 &层次
旺旺的博客
06-20 3539
1.什么是定位?定位就是使得元素按照你想的去摆放。2.样式关键字 position是 样式关键字        可选值                 relative  相对定位                fixed     固定定位                absolute 绝对定位                static 默认值3.什么是相对定位已经怎么设置相对定位？    相...
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {  width: 100px;  height: 100px;  margin: 5 auto;  color: #fff;  background: #000; } .aa, .bb, .cc, .dd, .ee {  top: 10px;...{positi
css教程之绝对定位使用详解
12-13
一.基本概念: 如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位...可以使用top属性和left属性设置绝对定位对象的偏移量。绝对定位虽然脱离了文档流，但是也需要有定位的参考对象
CSS网页布局教程:绝对定位和相对定位
12-07
了解并熟练掌握相对定位和绝对定位，以及如何结合使用`left`、`right`、`top`、`bottom`和`margin`属性，对于创建复杂的网页布局至关重要。通过实践和实验，开发者可以创造出各种创新和精美的网页设计。
css3绝对定位元素遮罩层不遮挡页面的处理方式
weixin_30511039的博客
11-01 1043
.zhezhao{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0,0,0,0.3); -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: no...
相对定位、绝对定位、固定定位、层级的问题
weixin_48127010的博客
09-11 1050
定位 定位定位1、相对定位2、绝对定位3、绝对定位相对定位结合使用4、固定定位5、层级 1、相对定位 是一种占位定位，虽然移动了位置但在标准流的位置还存在，在移动时是z轴空间此时不会影响周围的元素，但是标准流的位置还存在 position:relative; 水平偏移量 left:0; right:0; 垂直偏移量 top:0; bottom:0; 2、绝对定位 不占位置，完全脱离标准流，默认参考点是窗口 position:absolute; top:0; left:0; 当left和right同
块元素居中方式
gklcsdn的博客
12-10 787
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
相对、绝对定位、固定定位、粘滞定位、绝对定位元素的位置、元素层级、定位拓展、淘宝焦点图、网页布局总结、元素显示隐藏（display visibility overflow）土豆—05.position
weixin_70320000的博客
12-19 1431
相对定位、绝对定位、固定定位、粘滞定位、绝对定位元素的位置、元素的层级、定位的拓展、淘宝焦点图、网页布局总结、元素的显示与隐藏
解决绝对定位元素不能覆盖其父元素同级的绝对定位元素问题
weixin_46027556的博客
04-19 653
鼠标悬浮显示具体内容，存在不能覆盖其父元素同级的绝对定位元素的问题，父级设置的z-index层级都是相同的。
绝对定位z-index失效，元素在父元素外消失解决方案
qq27229639的博客
12-16 3804
开发时遇到如下情况： div元素设置为绝对定位，当right设置为负值时，超出父元素的部分消失。 解决思路： 通过元素选择器可看到，元素实际已定位到想要的位置，原以为是由于不同路由限制不同元素view层重叠，后观察跟父元素属性相关，父元素设置了高度并且有overflow:auto属性（hidden也会有此现象），导致其子元素被隐藏。 解决方法： 找到父元素，移除overflow属性，可以解决。 ...
z-index无效，无论设置多大都被其他的元素覆盖
热门推荐
zhu562002124的博客
09-18 2万+
z-index问题 .test-div{ border:1px blue solid; width:300px; min-height:100px; position:relative; -z-index:0; font-size:18px; font-family:microsoft yahe;
上层元素挡住下层元素事件的解决方法
又菜又爱玩
11-21 1878
上层元素挡住下层元素事件的解决方法： 当出现一个元素上面还定位上其他元素的时候，底层元素的点击事件，滑动事件会被上层元素挡住。 #解决办法 ： 给上层元素加一句css样式 pointer-events:none; ...
css层叠上下文，以及z-index不生效(问题)
weixin_60547084的博客
02-13 777
文章目录1. 层叠上下文2. 层叠上下文与z-index的解释3. z-index不生效 1. 层叠上下文 创建层叠上下文的元素的背景和边框 层叠级别 z-index 为负值的层叠上下文 常规流非定位的块盒 非定位的浮动盒子 常规流非定位行盒 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文 层叠级别 z-index 为正值的层叠上下文 2. 层叠上下文与z-index的解释 在层叠上下文规则中，1-5条还是很好理解的，第6条的意思是一个元素的子元素是一定
css相对定位和绝对定位
最新发布
08-10
相对定位和绝对定位是CSS中的两种定位方式。 相对定位是指元素相对于其自身原来位置进行定位。使用相对定位时，可以通过top、left、bottom、right属性来调整元素的位置。相对定位的参照物是元素本身。1<em...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值