javascript - 如何通过更改 CSS 让图像在放置时相互叠加？

Question

我正在为 Qualtrics 中的一项调查自定义 CSS。我对图片使用拖放功能。放下时，图片将添加到一个 div 中。图像被添加到彼此下方。有没有办法通过更改 CSS 将图片放在 div 中时彼此叠加？

链接到 survey

当前部分自定义的 CSS:

<style type="text/css">
.Skin #SkinContent .PGR .DragAndDrop .Group {
    width: 10%;
}

.Skin .PGR td.itemsContainerTd {
   border-width: 0px 0px 0px 0px;
   border-style: none;
   vertical-align: top;
   padding: 5px 10px 5px 5px;
   float: left;

  }

.Skin .PGR td.groupsContainerTd {
   width: 100%;
   padding: 350px 10px 5px 5px;
   padding-bottom: 50px;
   float: none;
}

.Skin #SkinContent .RO .DND .QuestionBody ul li, .Skin #SkinContent .PGR .DragAndDrop .QuestionBody ul li {
    background-image: url("");
    background-position: 5px center;
    background-repeat: no-repeat;
    padding-left: 0px;
}

.Skin .PGR .DragAndDrop .rank {
    }

.Skin .PGR .DragAndDrop ul {
    text-align: center;
}

.Skin #SkinContent .RO .DND .QuestionBody ul li, .Skin #SkinContent .RO .RB .ChoiceStructure th, .Skin #SkinContent .TE .FORM .ChoiceStructure table td, .Skin #SkinContent .horizontalbar th.ylabel, .Skin #SkinContent .Matrix table td, .Skin #SkinContent .Matrix table th, .Skin #SkinContent .PGR .GroupNoDnd .inner, .Skin #SkinContent .PGR .GroupNoDnd h2, .Skin #SkinContent .PGR .DragAndDrop .QuestionBody ul li, .Skin #SkinContent .SBS thead th, .Skin #SkinContent .SBS td {
    padding: 0px;
}

/* DRAG AND DROP */
.Skin .RO .DND ul{
    width: 100%;
}
.Skin .RO .DND .rank{
    float:right;
    right:4px;
    top:6px;
    font-weight:bold;
    padding:4px 8px;
    background-color:#666666;
    color:white;
}
.Skin .RO .DND ul li.ReadableAlt
{
    border-width: 1px 0 1px 0;
    border-style: solid;
}

.Skin .RO .DND ul li img{

}
.Skin .RO .DND .QuestionBody ul li label{

}
.Skin .RO .DND ul li{
    padding:10px 4px;
    cursor: pointer;
    cursor:move;
    position:relative;
    zoom:1;
}
.Skin .RO .DND ul li:hover{
    background:#E6ECF5;
}


.Skin .RO .DND ul.NotEdited .rank{
visibility:hidden;
}

.Skin .RO .DND ul.Edited .rank,
.Skin .RO .DND ul.NotEdited li:hover .rank{
    visibility:hidden;
}

/* DND */
.Skin .PGR .DragAndDrop td.itemsContainerTd{
    height: 100%;
}
.Skin .PGR .DragAndDrop .stack td.itemsContainerTd{
    border-right: none;
}
.Skin .PGR .DragAndDrop td.groupsContainerTd{
    vertical-align: top;
}
.Skin .PGR .DragAndDrop td.groupsContainerTd div > div {
    border: 0px solid #BBB;
    border-collapse: collapse;
    min-height:150px;   
}
/* end overrides to PGR.css */

.Skin .PGR .DragAndDrop ul{
    list-style: none;
    height: 150px; /* min height for ie < 7 */
    width: 150px;
    border-collapse:collapse;
    margin: 0;
    padding: 0;
    text-align:left;
}

html > body .Skin .PGR .DragAndDrop ul{
    height:auto;
    min-height:100px;
}
html > body .Skin .PGR .DragAndDrop .stack ul.stack{
    margin: 25px 25px 0 0;
}
html > body .Skin .PGR .DragAndDrop .stack div.Group ul.stack{
    margin-left: 20px;  /* Group Ones need left margin */
}

.Skin .PGR .DragAndDrop ul li{
    /* basequestion overrides go here */
}
.Skin .PGR .DragAndDrop ul li.stack{
    position: absolute;
}
.Skin .PGR .DragAndDrop div ul li span label img {
    max-width: 100%;
}
.Skin .PGR .DragAndDrop .stack div ul li.stack span label {
    width: 200px;
    height: 255px;
}
.Skin .PGR .DragAndDrop .stack div ul li.stack span label img {
    width: 200px;
    height: 255px;
    visibility: visible;
}
.Skin .PGR .DragAndDrop .stack .Group li.stack span.rank {
    visibility: hidden;
}
.Skin .PGR .DragAndDrop .stack div.Group ul li span img {
    width: auto;
}
.Skin .PGR .DragAndDrop .stack ul li.stack {
    background-color: white;
    border: 2px solid #CCC;
    box-shadow: 0 0 0px rgba(0,0,0,0.3);
}

.Skin .PGR .DragAndDrop .stack ul li.stack.penultimate {
    margin-top: 0px;
    margin-left: 0px;
}
.Skin .PGR .DragAndDrop .stack ul li.stack.antepenultimate {
    margin-top: 0px;
    margin-left: 10px;
}

.Skin .PGR .DragAndDrop .ProgressCounter{
    text-align: center;
}

html > body .Skin .PGR .DragAndDrop ul li{

}
.Skin .PGR .DragAndDrop ul li:hover,
.dragAndDropPGRquestion .DND ul li.over{
    border:1px solid #cccccc;
}
.Skin .PGR .DragAndDrop .Group h2,
.Skin .PGR .DragAndDrop .Items h2{
    font-size:12px;
    margin:0;
    padding:0;
    text-align:center;
    display:block;
}
.Skin .PGR .DragAndDrop .Items{
    margin: 0px;
    padding:0;
    height:100%;
}

.Skin .PGR .DragAndDrop .Group{
    float: left;
    margin-left: 2px;
    margin-top: 2px;
}
.Skin .PGR .DragAndDrop .Items  h2{
    padding-top:5px;
    border:none;
}
.Skin .PGR .DragAndDrop .Items ul{
    border:none;
    height:150px;
}
html>body .Skin .PGR .DragAndDrop .Items ul{
    min-height:150px;
    height:auto;
}
.Skin .PGR .DragAndDrop .Group ul,
 .Skin .PGR .DragAndDrop .Group h2,
 .Skin .PGR .DragAndDrop .Items ul,
 .Skin .PGR .DragAndDrop .Items h2{
    width:200px;
}
.Skin .PGR .DragAndDrop .Items ul li{
    /*background:transparent url(../../WRQualtricsShared/Graphics/Spacer.gif) top left;*/
    border:none;
}
.Skin .PGR .DragAndDrop .Items ul li .rank{
    display:none;
}
.Skin .PGR .DragAndDrop .QuestionBody label{
    display:block;
    zoom:1;
}
.Skin .PGR .DragAndDrop .clear{
    clear:both;
    visibility:hidden;
}

.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div {
    float: none;
}

.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul,
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2 {
    width: 337px;
}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div > div {
    width: 337px;
    margin: 0 auto;
}
.Skin .PGR .DragAndDrop .rank{
    position:absolute;
    right:2px;
    top:3px;
    font-weight:bold;
    padding:1px 5px;
    background-color:#666666;
    color:white;
visibility: hidden;
}
.Skin .PGR .DragAndDrop ul li{
    padding:4px;
    cursor: pointer;
    position:relative;
}

.Skin #SkinContent .PGR td.groupsContainerTd {
    padding-left: 0;
}</style>

Answer 1

根据图像添加到页面 DOM 的方式，您可以使用伪类 :first-child 或 jQuery .first .last 并用 z-index 定位它，这样它就会在上面。 附言如我所见，该站点未使用 jquery，因此使用 javascript 变得有点棘手。