CODEWITHSUNDEEP
htmlcss
thadeuszlay
thadeuszlay

Reputation: 3015

How to move a child element above another child element of a parent element that is above it's own parent element?

I have two parent elements (a black and red divs). Each of them contain a child element. The black one contains a gray div. The red one contains a pink div.

Following constraints:

Is it possible to move the pink div above the gray div?

.parent-black {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, .9);
  color: white
}

.child-gray {
  width: 250px;
  height: 90px;
  background-color: gray;
  position: absolute;
  right: 137px;
  top: 20px;
  z-index: 0;
  color: white;
}

.parent-red {
  width: 100%;
  height: 40px;
  background-color: red;
  position: absolute;
  top: 40px;
  z-index: -999;
}

.child-pink {
  width: 95%;
  height: 80px;
  background-color: pink;
  top: 30px;
  left: 20px;
  position: absolute;
  z-index: 9999;
}
<div class="parent-red">
  2
  <div class="child-pink">2.1</div>
</div>
<div class="parent-black">
  1
  <div class="child-gray">1.1</div>
</div>

Upvotes: 0

Views: 658

Answers (2)

Jordi Nebot
Jordi Nebot

Reputation: 3401

Honestly, I don't get the real problem here... I guess this follows your constraints:

.parent-black {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, .9);
  color: white;
  position: relative;
}

.child-gray {
  width: 250px;
  height: 90px;
  background-color: gray;
  position: absolute;
  right: 137px;
  top: 20px;
  z-index: 0;
  color: white;
}

.parent-red {
  width: 100%;
  height: 40px;
  background-color: red;
  margin-top: -20px;
}

.child-pink {
  width: 95%;
  height: 80px;
  background-color: pink;
  top: 70px;
  left: 20px;
  position: absolute;
  z-index: 9999;
}
<div class="parent-black">
  1
  <div class="child-gray">1.1</div>
</div>
<div class="parent-red">
  2
  <div class="child-pink">2.1</div>
</div>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Using jQuery below

$(document).ready(function() {
  $('.child-gray').insertBefore($('.child-pink'));
})
.parent-black {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, .9);
  color: white
}

.child-gray {
  width: 250px;
  height: 90px;
  background-color: gray;
  position: absolute;
  right: 137px;
  top: 20px;
  z-index: 0;
  color: white;
}

.parent-red {
  width: 100%;
  height: 40px;
  background-color: red;
  position: absolute;
  top: 40px;
  z-index: -999;
}

.child-pink {
  width: 95%;
  height: 80px;
  background-color: pink;
  top: 30px;
  left: 20px;
  position: absolute;
  z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-red">
  2
  <div class="child-pink">2.1</div>
</div>
<div class="parent-black">
  1
  <div class="child-gray">1.1</div>
</div>

Upvotes: 0

Related Questions