Html 如何将一个图像置于另一个图像之上_Html_Css

Html 如何将一个图像置于另一个图像之上

html css

Html 如何将一个图像置于另一个图像之上,html,css,Html,Css,在一个div内，有一张图片，从div的边框到各个方向都应该有10px的边距。在图片的左下角有一个关于图像。只有通过jquery将图片加载到DOM中时，才会显示图片。问题在于，about图像的存在使图像向下偏移了与about图像高度一样多的像素我正在寻找尽可能干净的替代方法，将图片保留在DIV中，并在其顶部显示about图像。将图片设置为背景将不起作用，因为我需要立即加载图片如果您对css有任何改进，我们将不胜感激。下面是一个完整的html页面，重现了这个问题 <html>

在一个div内，有一张图片，从div的边框到各个方向都应该有10px的边距。在图片的左下角有一个关于图像。
只有通过jquery将图片加载到DOM中时，才会显示图片。问题在于，about图像的存在使图像向下偏移了与about图像高度一样多的像素

我正在寻找尽可能干净的替代方法，将图片保留在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>


疑难解答：：对齐DIV内的主图片
html，正文{
背景色：#000000；
}
#关于{
z指数：2；
位置：相对位置；
最高：82%；
左：3%；
}
#图片{
宽度：100%；
身高：96%；
}
#主要内容图像{
身高：100%；
右边距：10px；
左边距：10px；
边缘顶部：10px；
边缘底部：10px；
}
#主要内容{
高度：490px；
边框宽度：1px；
边框样式：实心；
边框颜色：#777777；
}
#main-content-image.load{
背景：url(http://farros.gr/images/ajax-loader2.gif)无重复中心；
}
a{
文字装饰：无；
文字装饰：无；
颜色：#868686；
大纲：无；
}
.隐藏{
显示：无；
}
使用位置：绝对的关于图片，你可以把它放在任何你想要的地方。还要确保将#main content image设置为position:relative，以便它成为about图像的参考点
编辑：我已经用你的html对它进行了测试，它可以工作。
在about图片中使用position:absolute，你可以把它放在任何你想要的地方。还要确保将#main content image设置为position:relative，以便它成为about图像的参考点
编辑：我已经用您的html对其进行了测试，它很有效。
绝对定位将实现您的目标：
#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; 
}

绝对定位将实现您所追求的目标：
#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; 
}

一个（脏的）javascript解决方案是给包装图像的锚定提供“about”id，并将#about设置为“display:block；”
然后，在图像加载回调中，添加以下语句：
$(this).css({marginTop: "-40px"});

当心选民；我不喜欢让标记依赖于javascript代码执行，但他的代码中已经出现了这种情况。
一个（脏的）javascript解决方案是将包装图像的锚定改为“about”id，并设置“即将”为“display:block；”
然后，在图像加载回调中，添加以下语句：
$(this).css({marginTop: "-40px"});

当心选民；我不喜欢让标记依赖于javascript代码执行，但无论如何，他的代码中已经出现了这种情况