0

我希望我的 Div位于另一个 Divid="b"上，但是我将 Div放在 Div 下，我需要在 Css 中更改什么？id="a"id="b"id="a"

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;
}
4

2 回答 2

1

试试这个

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

对您有帮助阅读此文

编辑

工作小提琴

于 2013-09-10T13:40:49.477 回答
0

因此，我对您的代码进行了一些更新，希望我能正确解释您的问题。我说你想堆叠.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. 但是，如果您愿意，可以将 z-index 添加到 .pic_gar30。然后，我在 .pic_gar30 上使用 ::after 伪类选择器http://css-tricks.com/pseudo-class-selectors/以便将您的图标定位在图像上方。

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

于 2013-09-10T14:05:35.097 回答