2017-07-13 5 views
0

私は2つの親要素(黒と赤のdivs)を持っています。それぞれに子要素が含まれています。黒い部分には灰色のdivが含まれています。赤い部分にはピンクのdivが含まれています。子要素をその親要素の上にある親要素の別の子要素の上に移動するにはどうすればよいですか?

次の制約:

  • は、私は、それ自身の親要素に子との間の関係を変更することはできませんつまり、私はそれ自身の親要素の外に子要素を移動することはできません。
  • 赤divがグレーDIV上にピンクのDIVを移動させることが可能黒DIV

下に残る必要がありますか?正直なところ、私はここに本当の問題を得ることはありません...私はこれがあなたの次の推測

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

+0

下に低いZインデックスまたは位置を意味していますか? –

+0

親赤のzインデックスを削除すると、ピンクはグレーの上になります。 – user5014677

+0

@Ihazkode黒いdivは赤いdivをカバーする必要があります。つまり、赤いdivは黒いdivの下に隠れます。それは私が "黒いdivの下に" – thadeuszlay

答えて

0

制約:

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

0

の下にjQueryを使用して

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

関連する問題