{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 虎瘦雄心在 的问题《Why a fixed element covers a floated element?》','https://www.manongdao.com/q-1086353.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport. but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.