图像30像素下图像 [英] image 30 px under image

问题描述

所以我得到了

。 imgA1  {职位 ：  inherit;   top  ：  0px;   z-index  < span class =code-keyword>：  2; } 
。 imgB1  { position  ： 绝对值;   top  ：  30px;   z-index  ：  2; } 
。 imgB2  { position  ： 绝对;   top  ：  60px;   z-index  ：  2; } 

，第一张图片在中间，

我需要的是放置第二张和在第一张图像的顶部和下方的第3个30px。相反，我得到的是页面顶部的30和60像素。



我如何参考第一张图片的位置？

解决方案

根据我的理解你的查询，我试着解决它。背景颜色代表你的形象。



这里是代码和链接



http://jsfiddle.net/KD2HL/ [ ^ ]



html结构：

 <   div     class   =  img-wrapper >  
 <   span     class   =  image-1  >  
 <   / span  >  
 <   span     class   =  image-2 >  
 <   / span  >  
 <  < span class =code-leadattribute> span     class   =  image-3 >  
 <   / span  >  
 < span class =code-keyword><   / div  >  

CSS

。 img-包装器 { border  ：  1px solid black;   position  ： 绝对值;   width  ：  360px;   height  ：  260px}  
 。  image-1  { background  ：  red;   position   ： 绝对;   top  ：  0px;   left  ： < span class =code-keyword> 0px;   width  ：  300px;   height  ：  200px}  
 。  image-2  { background  ：  green;  职位 ： 绝对;   top  ：  30px;   left  ：  30px;   width  ：  300px;   height  ：  200px}  
 。  image-3  { background  ： 蓝色;  职位 ： 绝对;   top  ：  60px;   left  ：  60px;   width  ：  300px;  高度 ：  200px}  

So I got that

.imgA1 { position: inherit; top: 0px; z-index: 2;}
.imgB1 { position: absolute; top: 30px; z-index: 2;}
.imgB2 { position: absolute; top: 60px; z-index: 2;}

and the first image is in the middle,
What I need is to place the 2nd and the 3rd 30px under and over the top of the first image. Instead what I get is 30 and 60 pixels from the page's top.

How can I refer to the 1st image's place?

解决方案

Hi,
As per I understand your query, I try to solve it. Background color is represent your image.

Here is code and link as well

http://jsfiddle.net/KD2HL/[^]

html structure:

<div class="img-wrapper">
    <span class="image-1">
    </span>
    <span class="image-2">
    </span>
    <span class="image-3">
    </span>
</div>

CSS

.img-wrapper{border:1px solid black;position:absolute;width:360px; height:260px}
.image-1{background:red; position:absolute; top:0px;left:0px; width:300px; height:200px}
.image-2{background:green; position:absolute; top:30px;left:30px;width:300px; height:200px}
.image-3{background:blue; position:absolute; top:60px;left:60px;width:300px; height:200px}

这篇关于图像30像素下图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！