minus margin inside another minus margin div

Question

i have given minus margin to .box2 its working but the inner div in it .slide is not working i want the .slide to move above the .box2.

here is the jsfiddle link i have tried please suggest some ideas.enter link description here

is this possible to do with margin itself rather doing with top? please point out if not possible.

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
}
.slide
{
  max-width:200px;
  margin:-25px auto 0 auto;
  height:60px;
  background:orange;
}
.slide1{
  float:left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

score 1 · Answer 1 · answered Apr 09 '19 at 09:16

You can use the CSS position property:

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
   position: relative;
  z-index: 1;
}
.slide
{
  max-width:200px;
  height:60px;
  background:orange;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.slide1{
  float:left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

score 1 · Accepted Answer · answered Apr 09 '19 at 09:31

I think the issue might be related to margin collapse.

Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.

Adding some sort of clearance between the parent and child prevents the collapse.
Here are a few methods:

Padding

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  padding-top: 1px;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

Border

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  border-top: 1px solid transparent;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

Pseudo-element

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
}

.box2:before,
.box2:after {
  content: ' ';
  display: table;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Apr 09 '19 at 09:06

0

Try this

.slide {
    max-width: 200px;
    margin: -25px auto 0 auto;
    height: 60px;
    background: orange;
    position: relative;
    top: -50px;
}

answered Apr 09 '19 at 09:06

jobinrjohnson

568
5
13

minus margin inside another minus margin div

3 Answers3