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>

我可以使用以下方式控制over风格：

.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提供给ul，而应该给你的父div

我似乎无法控制特定元素的风格

2 个答案: