CODEWITHSUNDEEP
htmlcssoverlay
Connor
Connor

Reputation: 7

Overlap div with div above

Ok, so I have been trying to make something like this:

Example

However, whenever I change the top margin of "3" it also pulls up "2" to the same height. I wrapped "3" inside of "2" because I wanted the bottoms to line up.

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Upvotes: 0

Views: 93

Answers (3)

Abhinav Risal
Abhinav Risal

Reputation: 1420

Put position: absolute in .div2 and position:relative in .div3

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
  position: absolute;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
  position:relative;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Upvotes: 0

Manu
Manu

Reputation: 1662

I think you want to position div3 absolutely to div2 (which should be relative). You can then play with div3 independently without dragging div2 along the way.

Maybe something like this? 

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <h1>
  Hello
  </h1>
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

And:

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  position: relative;
  background-color: #e8e8e8;
  height: 200px;
  text-align: center;
}

.div3 {
  position: absolute;
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

h1,p {
  padding: 0px;
 margin: 0px;
}

See fiddle here: https://jsfiddle.net/rdbjrqL3/

Upvotes: 0

C3roe
C3roe

Reputation: 96306

That's an effect of collapsing margins. I would simply do it the "other way around", position the element relative, and use a negative margin-bottom to have the outer div bottom end line up again.

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  position: relative;
  top: -50px;
  margin: 0 auto -50px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}
<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Upvotes: 1

Related Questions