没有显示在浏览器的克隆的元素

Question

我的页面上有一个带有一些子元素的div，现在点击一个按钮我希望将div与它的子元素一起克隆，但这有效但是克隆后的原始元素没有显示，我已经有一段时间试图弄清楚为什么会这样。我检查了我的CSS并删除了我对那些在克隆后没有显示的元素的“poisition：absolute”的地方，一切正常。有没有办法绕过这个？我真的很想知道。

这是我的Javascript：

     $(document).ready(function() {
       $('#lnkAddNewAnswer').click(function() {
         $('.answer-txt-area').first().clone(true, true).appendTo('.answers-container');
       });

       $('.answer-txt-area').hover(
         function() {
           $(this).find('.options').show();
         },
         function() {
           $(this).find('.options').hide();
         }
       );


     });

.answers-container {
  position: relative;
}
.answer-txt-area {
  background-color: #FFFFFF;
  height: auto;
  border: 1px solid #DCDCDC !important;
  border-left: 5px solid #DCDCDC !important;
  resize: none;
  margin-top: 15px;
}
.answer-txt-area .options {
  display: none;
  background-color: rgba(149, 183, 93, 0.2);
  padding: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 9999;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.answer-txt-area .options ul {
  margin: 0 !important;
  padding: 0 !important;
}
.answer-txt-area .options ul li {
  list-style: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers-container">
  <div class="answer-txt-area">
    <div class="options">
      <ul>
        <li><a class="lnkButton"><i class="glyphicon glyphicon-ok"></i> <span class="text">Set as correct answer</span></a>
        </li>
        <li><a class="lnkButton"><i class="glyphicon glyphicon-remove remove"></i> <span class="text">Remove answer</span></a>
        </li>
      </ul>
    </div>
    <textarea class="form-control" placeholder="Type answer here.." required="required" name="answer[]" cols="50" rows="10"></textarea>
    <div class="selected-answer"><i class="glyphicon glyphicon-ok"></i>
    </div>
  </div>
</div>

这是克隆之前浏览器中的样子：

这是克隆后的样子：

Answer 1

元素正在被克隆，它只是没有被放置在您认为的位置。

给.answer-txt-area一个位置，它会按预期工作：

.answer-txt-area {
    position: relative;
}

DEMO

.answer-txt-area .options相对于最近的祖先定位。因为距离最近的祖先是.answers-container，所以初始元素中的.options和每个克隆都位于彼此之上