Comment placer une image au-dessus d'une autre

A l'intérieur d'une div, il y a une image qui devrait avoir une marge de 10px dans toutes les directions à partir de la bordure de la DIV. Dans le coin inférieur gauche de l'image, il y a une image approximative.
L'image n'est affichée que lorsqu'elle est chargée dans le DOM via jquery. Le problème est que l'existence de la sur-image disloque l'image vers le bas autant de pixels que la hauteur de la sur-image.Comment placer une image au-dessus d'une autre

Je suis à la recherche de l'alternative la plus propre possible pour garder l'image à l'intérieur de la DIV et toujours afficher la sur-image sur le dessus. Définir l'image comme arrière-plan ne fonctionnera pas car j'ai besoin de l'image pour charger à la fois. Toute amélioration sur le css #about serait grandement appréciée.
Voici une page HTML complète qui reproduit la question

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

Source

2010-03-23 Dimitris Baltas

position d'utilisation: absolute pour la photo à propos et vous pouvez le placer où vous voulez. Veillez également à définir # main-content-image sur position: relative afin qu'elle devienne le point de référence de l'image about.

edit: Je l'ai testé avec ton code html, et ça marche.

Source

2010-03-23 20:29:16 Tesserex

positionnement absolu accomplira ce que vous cherchez:

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

Source

2010-03-23 20:32:30 Armstrongest

A (sale) javascript solution serait de donner l'ancre qui enveloppe l'image du « about » id au lieu, et mettre à #about « affichage: bloc;'

Puis, à l'intérieur de votre rappel de charge d'image, ajoutez l'instruction suivante:

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

Prenez garde downvoters; Je ne suis pas fan d'avoir un balisage basé sur l'exécution de code javascript, mais c'est ce qui se passe déjà dans son code.

Source

2010-03-23 20:33:01

Comment placer une image au-dessus d'une autre

Répondre

Questions connexes