如何將子元素移動到父元素的另一個子元素上方，該父元素位於其父元素上方？

我有兩個父元素（黑色和紅色div s）。它們中的每一個都包含一個子元素。黑色包含一個灰色的div。紅色的包含一個粉紅色的div。如何將子元素移動到父元素的另一個子元素上方，該父元素位於其父元素上方？

以下限制：

我的孩子之間的關係不會改變它自己的父元素，即我不能移動一個子元素它自己的父元素之外。
紅格必須保持黑色的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>

來源

2017-07-13 thadeuszlay

下是否意味着更低的z-index或定位？ –

那麼如果你刪除父母紅色的Z指數，粉紅色將會變成灰色。 – user5014677

@Ihazkode黑色div必須覆蓋紅色div，即紅色div「隱藏」在黑色div下面。這就是我的意思是「在黑色的底下」 – thadeuszlay

使用jQuery低於

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

來源

2017-07-13 07:22:51 Gerard

老實說，我沒有在這裏得到了真正的問題 ...我想這跟隨您限制條件：

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

來源

2017-07-13 07:24:27

如何將子元素移動到父元素的另一個子元素上方，該父元素位於其父元素上方？

回答

相關問題