Why a fixed element covers a floated element?

问题

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?