Qualtricsでの調査用にCSSをカスタマイズしています。写真でドラッグアンドドロップ機能を使用しています。ドロップすると、画像がdivに追加されます。画像は互いに下に追加されます。CSSを変更してdivにドロップしたときに画像を重ねて追加する方法はありますか？
調査へのリンク
現在の部分的にカスタマイズされた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>