Question

我动态创建DIV并将它们附加到特定的DIV。

我的问题是如何始终使最后创建的DIV高于附加（其父级）DIV中的其他DIV？

所以基本上我希望最后创建的DIV位于另一个的顶层。

DIV 4 - [created at 4:32pm]
DIV 3 - [created at 4:29pm]
DIV 2 - [created at 4:27pm]
DIV 1 - [created at 4:26pm]

动态DIV css：

.dynamicDIV{
    width:100%;
    position: relative;
}

追加DIV css：

.parentDiv{
    width: 100%;
    margin-top: 5px;
}

我没有提及z-index。我想把它放在其他人之上。

Answer 1

var parentElement; 
var newFirstElement; 

parentElement.insertBefore(newFirstElement, parentElement.firstChild);

Answer 2

正如我在评论中指出的那样，.prepend()可以在这里使用：

 $('.parentDiv').prepend('<div class="dynamicDIV">New Div</div>');

但还有第二种可能性：

$('<div />').addClass('dynamicDIV').text('New Div').prependTo('.parentDiv');

此解决方案更易于维护。

Demo

<强>参考

.prepend()

.prependTo()

Answer 3

对要使用新元素的任何元素使用.prepend（）：

http://api.jquery.com/prepend/

Answer 4

当DIV在position: absolute时，DOM中的最后一个兄弟会超过其他兄弟。这不取决于您插入它的时间。但您可以使用z-index: 1覆盖此行为。

请看这个HTML代码：

<style>
  div.container > div {position: absolute; z-index: 0}
  div#C {z:index: 7}
</style>
<div class="container">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

此代码将显示 C 隐藏 D ，隐藏 B ，隐藏 A 。

Answer 5

使用display:flex和flex-direction:column-reverse;的CSS可以为您提供帮助：

body {/* parent container of div to shw in a reverse flow*/
  display:flex;
  flex-direction:column-reverse; /* row-reverse if on line*/
  }
div {
  width:50%;
  border:solid;
  margin:auto;
  }
div:last-of-type:after {
  content:'last in document !';
  color:red;
  }

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>

无论如何，在DOM或CSS选择器中，last将是最后一个。反向订单仅显示在屏幕上。

最后创建的DIV高于其他DIV

5 个答案: