How can I put this make this box go below the text like in the image

Question

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout. I am getting the 2nd image as my result.

Codes:

 .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; } 

  <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> 

Answer 1

Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .

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;
}

If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .

Demo : https://jsfiddle.net/Ltxktaad/21/

Answer 2

You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the 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;
}