如何将图像放在另一个图像的顶部

在div中，有一张图片应该在DIV边框的所有方向上都有10px的边距。在图片的左下角有一个关于图片的信息。
图片只有当它通过jquery加载到DOM中时才会显示。问题是，约图像的存在使图像向下移动与约图像的高度一样多的像素。如何将图像放在另一个图像的顶部

我正在寻找最干净的可能替代方案，以保持DIV内的图片，并仍然在其上显示关于图像。将图片设置为背景将不起作用，因为我需要一次加载图片。

#about css的任何改进将不胜感激。
下面是完整的HTML页面，再现问题

<html> 
<head> 
<title>Troubleshooting :: align the main picture inside the DIV</title> 
<style type="text/css"> 
html, body { 
    background-color: #000000; 
} 

#about { 
    z-index:2; 
    position:relative; 
    top:82%; 
    left:3%; 
} 

#pic { 
    width:100%; 
    height:96%; 
} 

#main-content-image { 
    height:100%; 
    margin-right:10px; 
    margin-left:10px; 
    margin-top:10px; 
    margin-bottom:10px; 
} 

#main-content { 
    height:490px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #777777; 
} 
#main-content-image.loading { 
    background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center; 
} 

a { 
    text-decoration: none; 
    text-decoration: none; 
    color: #868686; 
    outline:none; 
} 

.hide { 
    display:none; 
} 
</style> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){  

     $(function() { 
      var img = new Image(); 
      $(img).load(function() { 
       $(this).hide(); 
       $(this).width('100%'); 
       $(this).height('96%'); 
       $('#main-content-image').removeClass('loading').append(this); 
       $(this).fadeIn(); 
      }).error(function() { 
       // notify the user that the image could not be loaded 
      }).attr('src', 'http://farros.gr/images/bg.jpg'); 
     }); 

    }); 
    </script> 
</head> 
<body> 
    <div id="main-content"> 
     <div id="main-content-image" class="loading"> 
      <a href="#"><img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/></a> 
     </div> 
    </div> 
</body> 
</html>

来源

2010-03-23 Dimitris Baltas

使用的位置是：绝对的有关PIC，你可以把它放在任何你想要的。还要确保将＃main-content-image设置为position：relative，以便它成为关于图像的参考点。

编辑：我已经用你的html测试过了，它能正常工作。

来源

2010-03-23 20:29:16 Tesserex

绝对定位将完成你所追求的：

#main-content-image { 
    position: relative; /* Needed so absolute positioning works on child */ 
} 

#about { 
    position: absolute; /* absolutely positioning it takes it out of the document flow */ 
    bottom: 10px; /* You said you wanted it on the bottom left, right? */ 
    left: 10px; 
}

来源

2010-03-23 20:32:30 Armstrongest

A（脏）JavaScript的解决方案将是给它包装你的形象“左右”的ID，而不是锚，并设置#about为“显示：块;'

然后，你的图像加载回调中，添加以下语句：

$(this).css({marginTop: "-40px"});

当心downvoters;我不喜欢让标记依赖于JavaScript代码执行，但这就是他的代码中已经发生的事情。

来源

2010-03-23 20:33:01

如何将图像放在另一个图像的顶部

回答

相关问题