comment placer un élément div au même endroit qu'un autre? (Je vais être caché et être basculé par action)

Question

Je veux avoir une image qui clique sur le fondu et affiche le texte "derrière". Pour le moment, tout ce que je peux faire, c'est que mon texte apparaisse au-dessus ou au-dessous de l'image, en fonction de l'endroit où je déplace l'élément dans le fichier html.

Si je peux comprendre cela, le plan est d'avoir l'affichage du texte: none et l'affichage de l'image: block puis les faire basculer par une action de cliquer sur l'image/en cliquant sur le div div.

Si cela n'a pas de sens, je peux essayer de clarifier.

Je travaille sur ma "page d'hommage" pour le camp de code gratuit. Ce n'est pas une exigence mais quelque chose en plus que je veux accomplir. L'idée est de faire disparaître mon image principale et d'afficher les éléments de la liste pour "l'historique des travaux et le calendrier Python". Tout est commenté dans mon lien de stylo de code ci-dessous. En question sont les deux éléments div "image principale" et "travail Histoire et chronologie Python"

Here is a link to my code pen

<!-- job history and Python timeline --> 
<div id="history-timeline" class="text-center" style="display:show; inline"> 

    <p> 
    <ul> 
     <li> 
     <li> 
      <li> 
      <li> 
</div> 

Answer 1

Ajouter position:absolute finale à votre image, il sortira du flux de page et empileront sur h2. maintenant vous pouvez cacher l'image sur le clic. J'ai utilisé display:none sur hover de div. assurez-vous que la hauteur de votre parent div correspond à la hauteur de l'image.

.hide_on_hover{ 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.hide_on_hover img{ 
 
    position:absolute; 
 
} 
 
.hide_on_hover:hover img{ 
 
    display:none; 
 
}

<div id="main-image-div" class="text-center hide_on_hover"> 
 
    <img 
 
     id="main-image" 
 
     src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" 
 

 
     class="rounded img-thumbnail " width="200" height="200"> 
 

 
    <!-- job history and Python timeline --> 
 

 
    <h2 id="history-timeline">does this work</h2> 
 
     
 
    </div>

Answer 2

Ceci peut facilement être réalisé en ajustant le positionnement et z-indexation.

Votre élément div parent souhaitera avoir un attribut position: relative. Le texte voudra alors avoir un attribut position: absolute. Cela permettra au texte de chevaucher votre image. La position relative indique à l'élément enfant de se positionner par rapport au parent fermé avec un attribut relatif.

L'étape suivante consiste à appliquer quelques attributs supplémentaires pour contrôler la couche. D'après ce que je comprends, vous voulez que l'image soit la couche supérieure et le texte soit la couche inférieure. Solution pour cela est d'appliquer position: relative; z-index: 2 à votre image et ajouter z-index: 1 à votre texte. L'attribut z-index donne un ordre de couche aux éléments qui se chevauchent. Nous devons donner position: relative à l'image car la position par défaut de cet élément ignore les attributs z-index. Les choses devraient commencer à se rapprocher maintenant.

Maintenant, vous avez mentionné l'utilisation d'un attribut display: block et display: none pour masquer votre image et afficher le texte. Cela fonctionnera en fonction de la fonctionnalité que vous avez décrite, mais créera un effet de saut depuis la configuration de l'affichage: aucun ne perd les paramètres de hauteur afin que vous obteniez des choses qui s'effondrent sur votre page. Si vous ne le souhaitez pas, vous devrez utiliser visibility: hidden et visibility: visible à la place.

Cependant, ce que je ne serais probablement faire est d'ajouter à la place une nouvelle classe css:

.hidden{ opacity: 0 } 

De cette façon, vous pouvez avoir le javascript plus simple et peut aussi aller dans la mesure d'animer l'effet de fondu.En parlant de Javascript, cela utiliser le code suivant:

$("#main-image").click(function(){ $(this).toggleClass('hidden') }); 

Voici ce que certains votre code modifié ressemble:

HTML:

<div id="main-image-div" class="text-center" style="position: relative"> 
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail"> 
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>   
</div> 

CSS

.hidden{opacity: 0} 

En dehors de la Dans ce cas, évitez de créer des styles en ligne et utilisez le HTML uniquement pour les classes. Référencez ces classes dans votre code CSS et appliquez votre style ici. Cela permet un code plus propre et plus facile à gérer lorsque votre site est construit.

Answer 3

Essayez ce code

$(document).ready(function(){ 

     $("#main-image").click(function(){ 
     $(this).removeClass('show-block'); 
     $(this).addClass('hide-block'); 
     $('#history-timeline').removeClass("hide-block"); 
     $('#history-timeline').addClass("show-block"); 

     }); 
     $("#history-timeline").click(function(){ 
      $(this).removeClass('show-block'); 
     $(this).addClass('hide-block'); 
     $('#main-image').removeClass("hide-block"); 
      $('#main-image').addClass("show-block"); 

     }); 

    }); 

DEMO