2

有一个图像我想绝对定位并添加一个 z-index,但我似乎无法实现它。

 <div>  
   <ul class="etalage">
     <li>
       <img class="etalage_thumb_image" src="codecanyon/demo_files/images/image1_thumb.jpg">
       <img class="etalage_source_image" src="codecanyon/demo_files/images/image1_large.jpg">
     </li>
   </ul>
 </div>     

我可以使用以下方法控制过度风格:

.etalage {
  margin-right: 50px;
  margin-bottom: 20px;
  clear: both;
}

但这不会影响我想要的源图像:

.etalage_source_image {
  position: absolute;
  top: 165px;
  left: 140px;
  z-index: 100;
} 

我究竟做错了什么?:_\

4

2 回答 2

1

您应该将包装器的位置设置为相对位置,具有相对定位的页面元素使您可以控制在其中绝对定位子元素。

.etalage {
    position: relative:
    ....
}
于 2012-07-21T02:49:17.540 回答
0
.etalage {
  margin-right: 50px;
  margin-bottom: 20px;
  clear: both;
  position:relative;
}

.etalage_source_image {
  position: absolute;
  top: 165px;
  left: 140px;
  width: xx;
  height: xx;
  z-index: 100;
} 

我认为你应该给你的父母而不是position:relativeuldiv

于 2012-07-21T05:45:14.103 回答