html - 如何使div透明并将其 float 在图像上？

我想使div透明并将其移到图像上。这是html和css的示例代码：

<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            width: 500px;
            margin: 0 auto;
        }
        .head {
            border: 2px solid black;
            width: 346px;
            height: 50px;
        }
        h2 {
            padding: 0px;
            margin: 10px;
        }
    </style>
</head>
<body>

    <div class="wrapper">
        <div class="head">
            <h2>Logo</h2>
        </div>
        <div class="slider">
            <img src="http://placehold.it/350x150">
        </div>
    </div>

</body>
</html>

输出结果：

但我想要这样：

有人可以帮我吗？提前致谢：）

最佳答案

提供position: absolute到.head

因此，您的代码变为：

body {
  width: 500px;
  margin: 0 auto;
}
.head {
  border: 2px solid black;
  width: 346px;
  height: 50px;
  position: absolute;
}
h2 {
  padding: 0px;
  margin: 10px;
}

<div class="wrapper">
  <div class="head">
    <h2>Logo</h2>
  </div>
  <div class="slider">
    <img src="http://placehold.it/350x150">
  </div>
</div>