CODEWITHSUNDEEP
htmloverlay
user2515606
user2515606

Reputation: 182

Div on Div displaced

enter image description here

I'm trying to write a div on div and I'm stuck trying to get the title right on the line of the div. Does anyone know how to do this?

Upvotes: 0

Views: 527

Answers (1)

jbutler483
jbutler483

Reputation: 24549

You may be interested in looking into position of en element.

For example, using the middle box as the 'middle' div, and a displaced div for this title;

.outer {
  margin: 0 auto;
  height: 400px;
  width: 80%;
  border: 5px solid red;
  position: relative;
}
.middle {
  height: 200px;
  width: 80%;
  border: 5px solid blue;
  
  /*centering the blue div to middle of the red box*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.displaced {
  font-size: 30px;
  
  /*needed to put the green div up onto the line*/
  position: absolute;
  left:50%;
  transform: translate(-50%, -50%);
  border: 2px solid green;
}
<div class="outer">
  <div class="middle">
    <div class="displaced">
      this will be on the line
    </div>
  </div>
</div>

For more information please read the w3c documents relating to this positioning.

Further Reading

  • The transform property, which allows you to use this 'translate' the child element with relation to the parent who has a position defined (such as relative, or in this case, 'middle' div's absolute position)

Upvotes: 1

Related Questions