如何將圖像放置在另一個圖像之上

Question

在div內，有一張圖片在距DIV邊界的所有方向上應有10px的邊距。 在圖片的左下角有一個關於圖片。
該圖片僅在通過jquery將其加載到DOM中時顯示。 問題在於，關於圖像的存在使圖片向下移位的像素數與關於圖像的高度一樣多。

我正在尋找最干凈的替代方法，以將圖片保留在DIV中，並仍然在其頂部顯示about-image。 將圖片設置為背景將不起作用，因為我需要立即加載圖片。

#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>

Answer 1

使用位置：about圖片的絕對位置，您可以將其放置在任何位置。 還要確保將＃main-content-image設置為position：relative，這樣它就成為about圖像的參考點。

編輯：我已經用您的html測試了它，並且可以工作。

Answer 2

一個（骯臟的）javascript解決方案是給包裹您圖片的錨定“約” id，然后將#about設置為“ display：block;”

然后，在圖像加載回調內部，添加以下語句：

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

當心下注者； 我不喜歡讓標記依賴於javascript代碼執行，但是無論如何這就是他的代碼中發生的事情。

Answer 3

絕對定位將實現您所追求的目標：

#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; 
}

如何將圖像放置在另一個圖像之上

問題描述

3 個解決方案

解決方案1
4 已采納 2010-03-23 20:29:16

解決方案2
3 2010-03-23 20:33:01

解決方案3
1 2010-03-23 20:32:30

如何將圖像放置在另一個圖像之上

問題描述

3 個解決方案

解決方案1 4 已采納 2010-03-23 20:29:16

解決方案2 3 2010-03-23 20:33:01

解決方案3 1 2010-03-23 20:32:30

解決方案1
4 已采納 2010-03-23 20:29:16

解決方案2
3 2010-03-23 20:33:01

解決方案3
1 2010-03-23 20:32:30