在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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐