当某些特定元素前置时，如何防止其他元素不改变位置？答案

【问题标题】：How to prevent other elements not to change position when some specific element prepend?当某些特定元素前置时，如何防止其他元素不改变位置？
【发布时间】：2015-08-28 11:57:41
【问题描述】：

我有一个问题，当我通过按下输入按钮添加 div 时，它（按钮）也会随着我第一次添加的 div 而下降。

代码如下：

$(document).ready(function() {
  var count = 0;
  $("#addBut").click(function() {


    $('body').prepend('<div class="content"  id="first' + count + '"><h3>Heading tag</h3><p>Paragraph tag</p></div>');
    //It is the jquery code div which I prepends
    count++;

  });

  $("#TextBut")
    .click(function() {
      var value = $(inpText).val();
      $("#para").text(value);
    })
});

#addBut {
  //style of button which goes down
  display: block;
  padding: 3px 10px;
  cursor: pointer;
  margin: auto;
}
.content {
  //style of div which is to be prepend
  position: relative;
  background-color: white;
  width: 500px;
  height: 350px;
  padding: 25px;
  border: 5px solid black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="inpText">
  <textarea rows="12" cols="50">//it is text area which also goes down TextArea Location
  </textarea>
  <input type="button" id="addBut" value="Add">// HTML tag of Button which goes down
  <input type="button" id="TextBut">
</div>

谁能帮助我，当某些特定元素被添加时，如何避免其他内容不改变它们的位置？

【问题讨论】：

你试过追加吗？
抱歉，我使用了 prepend。
追加可能不会发生这种情况。
'); count++; }); $("#delBut").click(function(){ $("#first5").remove(); }); });

使用上面的 JQUERY 代码加上 prepend 来检查 div 的确切位置。我希望在正文顶部添加新的 div

标签： jquery html css

【解决方案1】：

Prepend 在其他元素之前插入新元素，Append 在之后插入元素，所以需要使用 Append 代替。

https://jsfiddle.net/9k1nf6za/

$('body').append('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>');

【讨论】：

但是我需要在页面顶部添加新的DIV
一切皆有可能，但请说你想如何在其他元素之前插入一个新元素而不移动它们，为它腾出空间？

【解决方案2】：

请尝试以下代码。

<!doctype html>
<html>
<head>

<title>prepend demo</title>
<style>
#addBut{     //style of button which goes down
display: block; padding: 3px 10px; cursor: pointer; margin: auto;
}

.content{       //style of div which is to be prepend
position:relative;
background-color: white;
width: 500px;
height:350px;
padding: 25px;
border: 5px solid black;
 display:block;
margin-left:auto; 
margin-right:auto;
top:200px; 
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<input type="text" id="inpText"> 
<textarea rows="12" cols="50">   //it is text area which also goes down
TextArea Location    
</textarea>
<input type="button" id="addBut" value="Add"> // HTML tag of Button which goes down
<input type="button" id="TextBut">
</div>
<script>
$(document).ready(function(){
var count=0;
$("#addBut").click(function(){


$('body').append('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>'); 
//It is the jquery code div which I prepends
count++;

});

$( "#TextBut" )
.click(function() {
var value = $( inpText ).val();
$( "#para" ).text( value );
})
});
</script>

</body>
</html>

【讨论】：

但是我需要在页面顶部添加新的DIV
'); count++; }); $("#delBut").click(function(){ $("#first5").remove(); }); });

使用它来检查 div 的确切位置。我希望在顶部添加新的 div

【解决方案3】：

使用.append()，因为它在其他元素之后插入元素。或者你可以试试.prepend() 动画。 Prepend with animation

【讨论】：

'); count++; }); $("#delBut").click(function(){ $("#first5").remove(); }); });

使用这个 jquery 代码来检查 div 的确切位置。我希望在正文顶部添加新的 div

【解决方案4】：

请尝试下面的代码，我固定了 div 的位置，并将 z-index 设置为内容 div，以便它显示在所有元素上方

<!doctype html>
<html>
<head>

<title>prepend demo</title>
<style>
#addBut{     //style of button which goes down
display: block; padding: 3px 10px; cursor: pointer; margin: auto;
}

.content{       //style of div which is to be prepend
position:relative;
background-color: white;
width: 500px;
height:350px;
padding: 25px;
border: 5px solid black;
 display:block;
margin-left:auto; 
margin-right:auto;
z-index:99999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div style="position:fixed; top:2%; right:2%;">
<input type="text" id="inpText"> 
<textarea rows="12" cols="50">   //it is text area which also goes down
TextArea Location    
</textarea>
<input type="button" id="addBut" value="Add"> // HTML tag of Button which goes down
<input type="button" id="TextBut">
</div>
<script>
$(document).ready(function(){
var count=0;
$("#addBut").click(function(){


$('body').prepend('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>'); 
//It is the jquery code div which I prepends
count++;

});

$( "#TextBut" )
.click(function() {
var value = $( inpText ).val();
$( "#para" ).text( value );
})
});
</script>

</body>
</html>

【讨论】：