我试图与jQuery绝对定位克隆的div。当我使用.css()方法将CSS添加到克隆元素时,它仅将文本移动(即使我将所有父元素的CSS复制到此对象中。
我在这里有一个小提琴:https://jsfiddle.net/emilychews/xuup6va1/3/
如果您单击蓝色div会产生克隆。
用于快速引用代码为:
$('#testdiv').click(function() {
$(this).clone()
.insertAfter('#testdiv');
});
#wrapper {
width: 100%;
height: 100%;
}
#testdiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
box-sizing: border-box;
padding: 10px;
background-color: blue;
color: white;
height: 350px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="testdiv">
<h1>I am a div</h1>
<p>with a blue background</p>
</div>
</div>
如果我这样做对我来说很好:
$('#testdiv').click(function() {
$( this ).clone()
.insertAfter('#testdiv')
.css({
position: 'absolute',
top: 0
});
});
,但请注意您的元素具有ID。因此,如果您克隆ID,则创建无效的标记。