我怎么能把这个让这个框在图像下方的文本下面

Question

我正在尝试进行上面的布局。但不幸的是，我无法将其作为上述布局。 我得到了第二张图片作为我的结果。

代码：

＆＃13;

＆＃13;

.text_box_holder{
  position: relative;

}
.text_box_holder h1{
  text-align: right;
  padding-right: 50%;
  color: #fff;
  background: inherit;
  -webkit-background-clip: text;
}
.learn_more_in_box{

  color: #fde428;
  text-align: right;
  padding-left: 31% !important;

  -webkit-background-clip: text;

}
.yellow_box{
  position: absolute;
  border: 7px solid #fde428;
  width: 40%;
  height: 300px;

}

＆＃13;

  <div class="text_box_holder">
    <div class="yellow_box"></div>
    <h1>Consumer<br>Products<br>Consulting</h1>
    <a href="" class="learn_more_in_box">LEARN MORE</a>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请尝试以下代码。我没有添加任何背景图像。我试过只用盒子添加2个文本。

HTML

<div class="text_box_holder">
    <div class="yellow_box"> </div>
    <div class="text1"> 
      <h1>Consumer<br>Products<br>Consulting</h1>
      <div class="text2"><a href="">LEARN MORE</a></div>
    </div>
  </div>

<强> CSS

.text1 {
  margin-top: 30px;
  position:absolute;
  text-align: left;
  color: #bc7e09;
}
.yellow_box{
  margin-left: 60px;
  position: absolute;
  border: 5px solid #fde428;
  width: 40%;
  height: 300px;
}

如果你想为整个空间添加地面图像，你可以与HTML集成。我希望它能帮助你。

演示：https://jsfiddle.net/Ltxktaad/21/

Answer 2

您需要在文本周围提供额外的包装器div，这些div需要绝对定位。这是working example。

<div class="text_box_holder">
    <div class="yellow_box"></div>
    <div class="main-text-wrapper">
      <h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
      <a href="" class="learn_more_in_box">LEARN MORE</a> </div>
  </div>

.text_box_holder{
  position: relative;

}
.text_box_holder h1{
  text-align: right;
  padding-right: 50%;
  color: green;
  background: inherit;
  -webkit-background-clip: text;
  text-align: left;
  position: absolute;
  top: -22px;
  margin-top: 18px;
  margin-bottom: 18px;
}
.learn_more_in_box{

  color: #fde428;
  text-align: right;
  -webkit-background-clip: text;
  text-align: left;
  position: absolute;
  top: 4px;
}
.yellow_box{
  position: absolute;
  border: 7px solid #fde428;
  width: 40%;
  height: 300px;
  margin-left: 45px;
  z-index:2;
}
.main-text-wrapper {
  background-color: white;
  width: 40%;
  height: 110px;
  position:absolute;
  top: 65px;
  z-index: 9999;
}
.link-text-wrapper {
  position:absolute;
  background-color: #fff;
  top: 195px;
  width:40%;
  height: 30px;
  z-index: 9999;
}