Chrome position:absolute 容器中嵌套的子元素position:fixed 一点bug
在chrome中,当然很少会遇到此情况.父元素position:absolute而子元素:position:fixed时打破了fix的位置固定,修复此bug父元素加上,将流式滚动,去掉则继续fix效果 -webkit-backface-visibility: hidden;-webkit-transform: translateZ(0);jsbin:http://jsbin.co
·
在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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)