Question

我正在努力做到这一点。 what I want

到目前为止，我还不知道如何将一个img-div与另一个text-div重叠，并在text-div的顶部保留空白。你会看见。我现在拥有的是：

<div id="some">
    <img src="photos/some.png">
    <div id="box">
        <p>Proudly seeking</p>
        <h2>some Cofefe</h2>
        <button id="shopNow" class="button">Shop</button>
    </div>
</div>

使用一些不太吸引人的CSS：what it looks like

#some{
    margin-top: 20px;
    background-color: red;
}
#some img{

    width: 30%;
    float: left;
}
#box{
    padding-top: 220px;
    margin-right: 40px;
    font-family: "Eusthalia";
    text-align: right;
}
#box p{
 margin-right: 32%   
}
h2 {
    font-size: 2.6em;
}
button {
    border: none;
    font-family: "Eusthalia";
    font-size: 15px;
    background-color: #300c06;
    color: #eadfc0;
    padding: 2px 10px;

}

我想知道我使用div的整个方法是否错误。我正在研究，发现对：0;不起作用之类的东西。如何使边框在图像后面重叠？如何给它一个宽度和一个高度，但使其向右推？

我是否必须将主div宽度设置为100％，然后将img的宽度设置为30％，将文本框中的彩色填充的颜色设置为70％？但是，我该如何在img后面放置框？

Answer 1

Drearo，我认为您使用div标签的情况还不错。您可能只需要更多的帮助。

我建议div处于位置：其中之一绝对是图像。文本框也需要它。除此之外，一些CSS可以使您获得所需的位置。看到这里：

<div id="some">
   <div class="my_img">
   <img src="photos/some.jpg" />
</div>
        <div id="box">
            <p>Proudly seeking</p>
            <h2>some Cofefe</h2>
            <button id="shopNow" class="button">Shop</button>
        </div>
</div>

css：

#some{
    margin-top: 20px;
    height: 100vh;
    width: 100vw;
    border: 1px solid #000;
    position: relative;
}
.my_img {
  position: absolute;
  top: 5em;
  left: 5em;
  z-index: 200;

}
.my_img img {
  width: 200px;
}
#box{
    position: absolute;
    top: 10em;
    left: 10em;
    transition: translate( -50%, -50%);
    font-family: "Eusthalia";
    text-align: right;
    background: red;
    min-width: 60%;
    padding-right: 2em;
}
#box p{
 margin-right: 32%   
}
h2 {
    font-size: 2.6em;
}
button {
    border: none;
    font-family: "Eusthalia";
    font-size: 15px;
    background-color: #300c06;
    color: #eadfc0;
    padding: 2px 10px;

}

https://jsfiddle.net/5k94j73p/

尝试在已填充的框中添加浮动图像和说明

1 个答案: