Superposition Divs Sans Position Absolue
Ce qui suit est une longue explication, mais c’est le seul moyen de communiquer efficacement le problème que je cherche à résoudre ...
J'essaie (un peu désespérément et totalement sans succès) d'essayer de superposer des divs sans utiliser de positionnement absolu. Le besoin découle d'un panier Paypal que je place sur le site via un Javascript. La position naturelle du panier est difficile par rapport à la marge supérieure de la page Web (pas à son div contenant, qui est #wpPayPal, ni à son wrapper, #main).
L'auteur du script recommande vivement de ne pas personnaliser la feuille de style du panier, mais j'ai trouvé un tutoriel qui permettait l'insertion du panier dans un espace réservé, avec des instructions de positionnement du conteneur qui fonctionnait. J'ai pu placer le panier sous la bannière supérieure du site. section. Toutefois...
Le formulaire HTML du panier et un élément ul dans chacun d'entre eux ont des exigences de hauteur dans la feuille de style du panier, ce qui pousse le contenu principal de la page, entouré par le conteneur div #imageWrapper, trop loin de la page pour être acceptable.
J'ai essayé de positionner #imageWrapper sur #main avec plusieurs idées provenant de messages postés sur ce site, sans succès. J'ai essayé le positionnement absolu sur #imageWrapper, mais cela permet au pied de page de flotter dessous. La hauteur de # imageWrapper est variable. Par conséquent, je ne souhaite pas maintenir le pied de page en place, car la hauteur minimale pour éviter tout chevauchement aurait pour effet de pousser le pied de page trop loin pour une grande partie du contenu du site.
J'ai également essayé de tirer la position: relative à partir du CSS du formulaire de panier, mais le panier revient immédiatement en haut de la page Web. La marge, la marge supérieure, etc., n'y remédie pas.
J'ai ensuite lu un article sur l'utilisation de position: relative et z-index pour superposer des divs. J'ai également essayé cela en mettant d'abord z-index: -1 sur #main (le div qui enveloppe le panier Paypal), mais le panier disparaît. Je ne sais pas où cela va, non plus, puisque le fil d'Ariane du site, également enveloppé par #main, est resté en place.
J'ai ensuite défini le z-index pour principal à 0 et la position appliquée: par rapport à #imageWrapper avec z-index: 100. Le panier a réapparu mais conserve toujours #imageWrapper.
Les suggestions sont les bienvenues. Je ne suis pas un utilisateur d'interface par un effort d'imagination, juste un gars qui sait utiliser Google, alors merci d'avance d'exprimer clairement votre résolution :) Aussi, pour info, j'ai actuellement l'exigence de hauteur minimale pour le panier mis à 0 et définissez l'élément UL dans height: auto. Avec un seul élément dans le panier, cela permet à #imageWrapper de se déplacer suffisamment vers le haut de la page pour être acceptable, mais ce n'est pas une solution viable à long terme.
Voici un exemple de page - pour voir le panier, ajoutez un article à l'aide du menu déroulant qui apparaît sous l'image principale. Dans son état développé, vous verrez comment se positionne #imageWrapper.
J'ai inclus des parties du code HTML/CSS incriminé ci-dessous:
<div id="main">
<div id="wpPayPal">
</div><!--end wpPayPal-->
<div id="breadcrumbs">
<span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</h1>
</div><!--end filename-->
etc...
#main {
display: inline;
position: relative;
z-index: 0;
}
#imageWrapper {
clear: both;
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#imageInnerWrapper {
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#featureImage {
width: 840px;
margin: 0 auto;
padding: 0;
}
#wpPayPal {
overflow: hidden;
float: right;
margin-right: 100px;
min-width: 365px;
min-height: 20px;
}
/* Override the default Mini Cart styles */
#wpBody #PPMiniCart form {
position: relative;
right: auto;
width: auto;
min-height: 0;
}
#wpBody #PPMiniCart form ul {
height: auto;
}
Violon simple: juste CSS
Un type en a posté un autre, mais il contenait un tas de codes superflus et un peu de JS .__ Un autre message avait la réponse, mais il lui manquait quelque chose
.over {
background: rgba(230, 6, 6, .5);
float: right;
height: 460px;
margin-top: -500px;
margin-right: 159px;
overflow: visible;
position: relative;
width: 560px;
color: #FFFFFF;
/* Just for looks*/
z-index: 1000;
padding: 20px/* Just for looks*/
}
.over span {
position: relative;
/* Just for looks*/
top: 15px;
/* Just for looks*/
}
.this {
width: 560px;
height: 460px;
color: #FFFFFF;
/* Just for looks*/
padding: 20px;
/* Just for looks*/
background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
/* Just for looks*/
}<div class="this">To BE UNDER</div>
<div class="over"><span>..or not To BE UNDER</span></div>Je l'ai!!! :RÉ
Solution Pure Css Très Facile. Mettez le suivant.
#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}
Remplacez tout ce que vous avez dans css #mainavec ce que j'ai fait dessus.
Donc remove les éléments suivants:
display: inline;
position: relative;
z-index: 0;
Explication: L’idée principale ici est de faire flotter l’élément principal, de le placer de certaine hauteur, de sorte qu’à aucun moment il n’abaisse tout. Mais rendez overflow visible. Le débordement de contenu n'affecte pas siblings de main element.
Le fond d’arrière-plan pour un bloc de hauteur dynamique peut être implémenté avec flexbox sans positionnement absolu
/* Every rule not marked by "required" is optional and used only to decorate the example */
.block {
margin: 10px 50px;
display: flex; /* required */
flex-flow: row nowrap; /* required */
}
.block .background,
.block .foreground {
box-sizing: border-box; /* required */
width: 100%; /* required */
flex: none; /* required */
}
.block .background {
background: #9ff;
color: #fff;
padding: 15px;
font-size: 30px;
}
.block .foreground {
padding: 15px;
border: solid 1px;
margin-left: -100%; /* required */
}
.block .foreground .outside {
position: absolute;
top: 5px;
left: 8px;
}<div class="block">
<div class="background">
Background
</div>
<div class="foreground">
<div>
<div class="outside">Outside</div> <!-- The "outside" div is also optional -->
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.</div>
</div>
</div>
</div>La solution est supportée par environ 97% des navigateurs .
Aucune des réponses précédentes n’aide réellement votre demande, c’est-à-dire d’autoriser PPMiniCart à se développer et à se contracter sans abaisser imageWrapper.
Le truc ici est de donner à wpPayPal une hauteur fixe suffisamment grande pour contenir la version contractée de PPMiniCart (40px suffira - cela donnera suffisamment de place au panier, sans pousser imageWrappertrop bas).
#wpPayPal {
height:40px;
}
Ensuite, donnez à main (le conteneur qui contient wpPayPal) un z-index supérieur à celui de imageWrapper afin qu'il le déborde.
#main {
z-index: 1;
}
#imageWrapper {
z-index: 0;
}
Régler imageWrapper z-index à 100 sorte de surdose, je recommanderais 0 comme je l’ai fait ci-dessus.
Vous devez également utiliser du langage JavasScript pour définir overflow: visible sur wpPayPal après que PPMiniCart se développe et le supprimer avant qu’il ne se contracte. Heureusement Mini Cart JS expose une API orientée événements de Nice permettant des rappels personnalisés. Puisque vous utilisez jQuery dans votre page Web, profitons de cela:
Paypal.apps.MiniCart.render({
parent: 'wpPayPal',
events: {
afterShow: function () {
$("#wpPayPal").css("overflow", "visible");
},
onHide: function () {
$("#wpPayPal").css("overflow", "");
}
}
});
Veuillez noter le choix judicieux des rappels afterShow et onHide, si vous essayez de le faire différemment (définir overflow: visible avant que PPMiniCart soit développé ou supprimé avant les contrats PPMiniCart) PPMiniCart "flottera" pendant la transition.
Enfin, un travail de violon vaut mille mots.
vous pouvez maintenant le faire avec grille également.
.parent {
display: grid;
grid-template-columns: 1fr;
}
.parent div {
padding: 50px;
background-color: rgba(0,0,0,0.5);
grid-row-start: 1;
grid-column-start: 1;
}<div class="parent">
<div class="child1">
1
</div>
<div class="child2">
2
</div>
</div>Vous avez trouvé une solution élégante à votre problème sans positionnement absolu OR flotte avec flexbox - le principal avantage est que les deux hauteurs de div sont respectées lors du calcul de la hauteur parent. Très utile pour superposer du texte sur une image:
body {
font-family: -Apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
max-width: 500px;
/*border: 1px solid Lime;*/
}
.card {
display: flex;
/*border: 1px solid red;*/
overflow: hidden;
}
.box {
position: relative;
min-width: 100%;
width: 100%;
flex-basis: 100%;
flex-grow: 1;
}
.box--image {
z-index: 1;
overflow: hidden;
}
.box--image.box--heightrestricted {
max-height: 300px;
}
.box--text {
z-index: 2;
margin-left: -100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: red;
}
.box--text h3 {
margin: 0;
padding: 1rem;
}<div class="container">
<button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
<br>
<br>
<div class="card">
<div id="imagebox" class="box box--image box--heightrestricted">
<img src="https://placeimg.com/640/640/4" alt="" />
</div>
<div class="box box--text">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
</div>
</div>
</div>Vous pouvez également utiliser flexbox pour créer un conteneur d'onglets sans position absolue:
/* Flex Overflow */
section {
display: flex;
width: 100%;
overflow: hidden;
}
section article {
flex: 100% 0 0;
order: 0;
}
section article:target {
order: -1;
}
/* UI */
section { background-color: #ecf0f1; }
section article {
display: flex;
align-items: center;
justify-content: center;
color: #ecf0f1;
font-size: 20px;
min-height: 8em;
visibility: hidden;
opacity: 0;
transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
visibility: visible;
opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }<ul>
<li><a href="#zoneA">Zone A</a></li>
<li><a href="#zoneB">Zone B</a></li>
<li><a href="#zoneC">Zone C</a></li>
<li><a href="#zoneD">Zone D</a></li>
</ul>
<section>
<article id="zoneA">A</article>
<article id="zoneB">B</article>
<article id="zoneC">C</article>
<article id="zoneD">D</article>
</section>