Question

我希望我的Div id="b" 另一个Div id="a"，但我得到Div id="b"下的Div id="a"，我需要在Css中更改什么？

HTML

 <div class="picad30">
   <div class="pic_sin30" id="a">
       <img width="110" border="0" class="pic_sin30" src="SMALLAD.png"/>
   </div>
   <div class="picgar30 p" id="b"></div>
   <div >
       <div >upload</div>
       <div ></div>
   </div>
 </div>

的CSS：

.picad30{
    width:130px;
    float:right;
    display:table;
    margin: 20px 0 0 0px;
    position: relative;
}

.pic_sin30{
    border: 1px solid #ccc;
    height: 87px;
    overflow: hidden;
    width: 130px;
    position: relative;
    z-index:1;
}

.picgar30{
    background-position:-5px -244px;
    cursor:pointer;
    height: 20px;
    width: 20px;
    float:left;
    z-index:20;
    position:absolute;
}

.p {
    background-image: url("PIC/icon.png");
    background-repeat: no-repeat;
}

Answer 1

试试这个

.p {
   background-image: url("PIC/icon.png");
   background-repeat: no-repeat;
   z-index:2;
   position:absolute !important;
   top:0;
   left:0;
}

对您Read this

有帮助

修改

Working Fiddle

Answer 2

所以我对你的代码做了一些更新，我希望我能正确地解释你的问题。我是说你要在.pic_gar30 or id=b之上叠加.pic_sin30 or id=a吗？然后在.pic_gar30之上添加图标？

如果这是正确的，我已经完成了以下操作，我已将2个图像div包装在一个名为pic-container的父div中，该div具有您希望在图像和相对位置上使用的高度，因此您可以绝对定位里面的图像也没有上传文本隐藏在后面。

你想在你的两个图像持有者上使用相同的CSS，所以我给它们两个类img-holder和应用的样式绝对定位，因为.pic-gar30 comes after .pic_sin30 it will automatically be positioned on top。但是如果你愿意，可以在.pic_gar30中添加z-index。然后我在.pic_gar30上使用了:: after伪装类选择器http://css-tricks.com/pseudo-class-selectors/，以便将图标放在图像上方。

请参阅我希望帮助的示例http://jsfiddle.net/LXaCT/

使用img元素划分Div

2 个答案: