html - 我似乎无法控制特定元素的样式

Question

有一个图像我想绝对定位并添加一个 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;
} 

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

Answer 1

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

.etalage {
    position: relative:
    ....
}

Answer 2

.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:relative给uldiv