如何将子元素移动到父元素的另一个子元素上方，该父元素位于其父元素上方？

我有两个父元素（黑色和红色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

如何将子元素移动到父元素的另一个子元素上方，该父元素位于其父元素上方？

回答

相关问题