在此先感谢,我试图添加粘滞图像一个在另一个之后,如下图所示,但我得到的结果作为一个在另一个下。最新增加的便签应该在最前面,所有其他便签都将落后最新。任何帮助将被理解。添加一个在另一个粘滞便笺
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.pink{
\t background:#f05f9d;
\t border:1px solid #f05f9d;
\t color:#fff;
\t font-weight:600;
}
.pink:hover{
\t background:#f05f9d;
\t border:1px solid #f05f9d;
\t color:#fff;
\t font-weight:600;
}
.pink-button{
\t padding: 10px 11px;
\t border-radius: 14px;
\t font-weight: 600;
\t font-size: 16px;
}
.sticky {
\t margin: 0;
\t padding: 8px 24px;
\t width:200px;
\t height:200px;
\t font-size: 1.4em;
\t border:1px #E8Ds47 solid;
\t -moz-box-shadow:0px 0px 6px 1px #333333;
\t -webkit-box-shadow:0px 0px 6px 1px #333333;
\t box-shadow:0px 0px 6px 1px #333333;
\t background: #fefdca;
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381));
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0);
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%);
}
.sticky p {
\t text-align: center;
}
.sticky textarea {
\t width:160px;
\t height:170px;
\t background: #fefdca;
\t background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381));
\t background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0);
\t background: linear-gradient(top, #fefdca 0%,#f7f381 100%);
\t border-bottom:none !important;
}
.sticky ol {
\t margin: 12px;
}
</style>
</head>
<body>
<div class="sticky">
<textarea placeholder="Type the problem here..."></textarea> \t \t \t \t
</div><br/> \t \t
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;position:absolute;margin-left:40px;">
<a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a>
\t </div>
</div>
</body>
<script>
$('#addProblem').click(function(){
\t $('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>');
});
</script>
</html>
尝试将'.sticky'设置为'position:absolute;'然后在他们的父对象上设置'position:relative;',然后使用它们的'z-index'和'left/right'属性。 – Krusader
试试这个https://jsfiddle.net/x7cqphq9/ – Krusader
嗯,完美...,但它是像一个在另一个上面添加,我想像一个在另一个像在上面的图像... ...! –