Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug

最新推荐文章于 2023-06-08 16:20:45 发布
最新推荐文章于 2023-06-08 16:20:45 发布
阅读量5.5k 收藏
点赞数 1

在chrome中，当然很少会遇到此情况.
父元素position:absolute

而子元素：position:fixed时
打破了fix的位置固定,
修复此bug父元素加上，将流式滚动，去掉则继续fix效果

 -webkit-backface-visibility: hidden;
 -webkit-transform: translateZ(0);

jsbin: http://jsbin.com/uhuzoy/2/edit

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <title>position fixed - Chrome bug</title>
</head>
<body>
  <div class='overlay'>
    <span></span>
  </div>

</body>
</html>

css

*{ margin:0; padding:0; }
body{  height:2000px; }

.overlay{ 
  position:absolute; 
  z-index:2; 
  top:30px; 
  left:30px; 
  right:30px; 
  height:1500px; 
  background:rgba(0,0,0,0.3); 
  /*-------- FIXES THE BUG -------------*/
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  /*-----------------------------------*/
}

span{ 
  position:fixed; 
  width:30px; 
  height:30px; 
  top:50%; 
  margin-top:-15px; 
  left:30px; 
  background:red; 

}

转自：http://stackoverflow.com/questions/17068361/chrome-positionfixed-inside-positionabsolute-breaking-with-iframe-video

花村大地主
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单说一下CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况
蘑菇猎手的专栏
06-01 7780
首先要清楚，position需要top,bottom,left,right来配合实现定位，当然根据实际情况，不必要把四个方向的定位全写出来。 举个例子。 position:absolute; top:10px; bottom:10px; left:10px right:10px 接下来就要分别介绍position属性的不嵌套使用（即该元素中没有子元素使用position），和
absolute模拟fixed效果（解决fixed失效问题）
尘埃丶落定的博客
06-22 4959
absolute模拟fixed效果 在IE6下，position:fixed不会生效，元素依旧会随着滚动条而滚动，我们可以用position: absolute来模拟fixed的效果。 1. overflow滚动条归属问题 当只设置html或body其中一个overflow时，都会作用到document上，滚动条的归属也是如此； 如果同时设置两个的overflow，html的overflo...
HTML之我才是定位王者：全面击破position属性(+文档流+absolute重叠、fixed问题)
Xmumu_的博客
01-04 1486
于之前的我而言，对position属性就是那种我知道有这个属性，但是具体怎么用，我不知道，就随便用呗，但是，但是，这种思想是非常不对的❗❗❗❗❗为痛改前非，狠心学习，终得这篇博文的问世，欢迎关注、交流???????????????????? 录子position属性概述position之static案例是否会重叠？position之absolute文档流重叠问题position之relativeposition之fixed position属性概述 该属性用于指定一个元素在文档中的定位方式，这个属性有s
父元素设置absolute或relative,子元素设置fixed定位失效
鼎诚技术团队博客
08-10 6623
fixed相对于body进行的窗口定位，而不是相对于父元素absolute或relative，所以当你想让fixed定位在窗口位置并且是相对于父元素的那只有一个办法就是把父元素设置为absolute或relative的同时子元素不设置任何的top、left、bottom、right。
前端面试题HTML+CSS基础篇——三栏布局
xiaomao_wxj的博客
08-08 315
如何实现一个左右宽度固定，中间自适应的三栏布局呢 下面就来介绍一下具体的实现方案吧！ 1. float浮动 2. position定位 3. flex布局 4 1. float浮动
使用绝对定位时浏览器大小改变排版会乱_angular浏览器兼容性问题解决方案
weixin_39819152的博客
11-30 282
问题：edge浏览器下，固定列的边框消失原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签：position: -webkit-sticky !important;position: sticky !important;谷歌、火狐及-webkit-内核的浏览器均支持该属性(css3)，IE不支持该属性，所以在IE中，会自动降级...
chrome中position:fixed对z-index的影响
02-26
dom结构：正常的实现方式很容易：因为B本身就在A的后面，当A和B都设置了position属性（非static），且没有设置z-index的时候，其层叠关系是后面的元素覆盖前面的元素，这样只需要给A-child设置z-index属性值即可。...
js完美解决IE6不支持position:fixed的bug
10-24
然而，这种方法有一个明显的缺点：它会影响到页面上所有使用`position:absolute`和`position:relative`的元素，将它们的行为也转换为类似`position:fixed`的状态。 为了解决这个问题，代码中引入了IE6特有的CSS ...
li标签的position:absolute与relative案例应用
09-25
在网页布局设计中，CSS（层叠样式表）的`position`属性是非常关键的一个概念，它决定了元素在页面上的定位方式。本案例中涉及到的是`position`属性的两个值：`relative`和`absolute`，它们在li标签的应用中起到了...
css中position:relative和overflow:hidden之间的问题
09-25
`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
相对定位、绝对定位和固定定位
最新发布
狗头苏丹的博客
06-08 363
相对定位就是相对于自己以前在标准流中的位置来移动。 绝对定位就是相对于body来定位。 绝对定位在这里分两种情况： (1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。 (2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
关于position:relative absolute fixed定位和布局的踩坑心得
热门推荐
英俊帅比林的博客
09-21 1万+
position属性介绍 absolute 顾名思义，这是绝对定位的意思，我们在使用时通常都是给元素声明了position:absolute属性，然后再用top,left,right,bottom属性去改变元素的位置，语法示例如下： position:absolute; top:10px; 该语句设置了定位方式为absolute,并且向下偏移了10px relative relative是相对定...
CSS 元素的绝对定位 position: absolute 和 position: fixed
歪脖先生的博客
02-21 2115
绝对定位当一个元素的 position属性设置为 absolute 或 fixed，它将使用绝对定位。绝对定位的元素将从文档流中完全删除，它原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样，因此不会在原先的位置留下空白。CSS 绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位（position属性被设置，且不是static）的祖先元素，...
CSS透明 阴影 圆角
x0572_的博客
07-22 336
css阴影 透明 圆角
当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
weixin_30583563的博客
11-03 222
问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。 解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成： 根元素 (HTML), 绝对（absolute）定位或相对（relative）定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考the specifi...
在chrome浏览器中，元素absolute/relative定位的一个BUG
网站开发初中级代码参考-转载
11-30 676
前几日，用EXT的一个组件的API（setAutoScroll）设置容器滚动条属性（overflow）发现的这个问题。 问题描述如下：··可能描述得有点乱，觉得描述有点糊涂的，可以直接复制代码自己操作下就很容易明白了。~~ 我们知道可以通过JS设置元素的overflow属性来设置是否显示滚动条，取值有auto, hidden, visible,scr...
h5页面软件盘把position为fixed和absolute的元素顶上来
dazn33036的博客
06-05 447
　　最近开发的时候遇到了一个很头疼的问题。就是在手机页面中点击输入框的时候，会弹出一个软键盘。这个时候在有些手机中底部position设置了absolute和fixed的值会被顶上来。 　　网上查阅了一下原因，说是因为软键盘弹出的时候页面的高度的值被改变了，所以定位的元素就被挤到上面来了。 　　然后在网上搜索了下解决办法，说是可以在元素获取焦点的时候让position值变为stati...
CSS之定位，relative/absolute/fixed的用法
liudanyang_21的博客
06-25 256
其实position的值有四个，static/relative/absolute/fixed，而static是默认值，不算具有有定位属性，这里就不讲了。定位其实就是跟元素设置定位属性，然后设置其对位的相对上下左右的距离，一般写法如下： position:absolute; top:20px; left:20px; 下面我们分情况讨论： 1、父级没有定位属性的情况，用relative和abosolute配合使用，解决一般的定位问题。 abosolute：绝对定位，其意义是相对其最近的一个有定位属性的父级元
position:sticky不兼容，什么情况下不生效
06-02
`position:sticky` 是 CSS 中一个比较新的属性，用于实现“粘性定位”，即元素在滚动到指定位置时会“吸附”在屏幕上固定显示，而在滚动到其他位置时则会跟随滚动。不过，`position:sticky` 并不是所有浏览器都支持...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值