Comment superposition d'une div sur une autre div
J'espère que quelqu'un peut m'aider, mais j'ai besoin d'aide pour superposer une personne div à une autre personne div .
mon code ressemble à ceci:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
malheureusement je ne peux pas nicher le div#infoi ou le img , à l'intérieur du premier div.navi .
il doit y avoir deux div s séparés comme indiqué mais je dois savoir comment je pourrais placer le div#infoi sur le div.navi et sur le côté le plus à droite et centré sur le dessus du div.navi .
apprécierait toute aide dans ce sens.
7 réponses
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div> je suggère d'apprendre à propos de position: relative et des éléments enfants avec position: absolute .
la solution acceptée fonctionne bien, mais L'OMI manque d'une explication quant à la raison pour laquelle elle fonctionne. L'exemple ci-dessous est résumé aux bases et sépare les CSS importants des CSS non pertinents. En prime, j'ai également inclus une explication détaillée de la façon dont le positionnement CSS fonctionne.
TLDR; si vous voulez seulement le code, Faites défiler vers le bas à le résultat .
Le Problème
il y a 2 éléments distincts, frères et sœurs, et le but est de positionner le 2e élément (avec un id de infoi ) de sorte qu'il apparaît dans l'élément précédent (celui avec un class de navi ). La structure HTML ne peut pas être changée.
Solution Proposée
pour atteindre le résultat souhaité, nous allons déplacer, ou positionner, le 2ème élément, que nous appellerons #infoi de sorte qu'il semble dans le 1er élément, que nous appellerons .navi . Plus précisément, nous voulons que #infoi soit placé dans le coin supérieur droit de .navi .
CSS Position de la Connaissance Nécessaire
CSS possède plusieurs propriétés pour les éléments de positionnement. Par défaut, tous les éléments sont 1519180920" . Cela signifie que l'élément sera positionné selon son ordre dans la structure HTML, à quelques exceptions près.
l'autre position valeurs relative , absolute , et fixed . En définissant position d'un élément à l'une de ces 3 valeurs, il est maintenant possible d'utiliser une combinaison des 4 propriétés suivantes pour positionner l'élément:
-
top -
right -
bottom -
left
En d'autres termes, par en plaçant position: absolute , nous pouvons ajouter top: 100px pour positionner l'élément 100px à partir du haut de la page. À l'inverse, si nous définissons bottom: 100px , l'élément sera positionné à 100px du bas de la page.
voici où beaucoup de nouveaux arrivants CSS se perdent - position: absolute il a un cadre de référence. Dans l'exemple ci-dessus, le cadre de référence est le body élément. position: absolute avec top: 100px signifie l'élément est positionné 100px à partir du haut de l'élément body .
le référentiel de position, ou contexte de position, peut être modifié en réglant le position d'un élément parent à toute valeur autre que position: static . C'est-à-dire que nous pouvons créer un nouveau contexte de position en donnant un élément parent:
-
position: absolute; -
position: relative; -
position: fixed;
par exemple, si un élément <div class="parent"> est indiqué position: relative , tout élément enfant utilise le <div class="parent"> comme contexte de position. Si un élément enfant recevait position: absolute et top: 100px , l'élément serait positionné 100px à partir du haut de l'élément <div class="parent"> , parce que le <div class="parent"> est maintenant le contexte de position.
les autres le facteur à connaître est ordre de pile - ou comment les éléments sont empilés dans la direction Z. Le must-know ici est l'ordre de pile des éléments sont, par défaut, définis par l'inverse de leur ordre dans la structure HTML. Prenons l'exemple suivant:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
dans cet exemple, si les deux éléments <div> étaient placés au même endroit sur la page, l'élément <div>Top</div> couvrirait l'élément <div>Bottom</div> . Depuis <div>Top</div> vient après <div>Bottom</div> dans la structure HTML il a un ordre de cumul plus élevé.
div {
position: absolute;
width: 50%;
height: 50%;
}
#bottom {
top: 0;
left: 0;
background-color: blue;
}
#top {
top: 25%;
left: 25%;
background-color: red;
}<div id="bottom">Bottom</div>
<div id="top">Top</div> l'ordre de cumul peut être modifié avec CSS en utilisant les propriétés z-index ou order .
nous pouvons ignorer l'ordre d'empilage dans ce numéro car la structure HTML naturelle des éléments signifie que l'élément que nous voulons voir apparaître sur top vient après l'autre élément.
donc, revenons au problème présent - nous utiliserons le contexte de position pour résoudre ce problème.
La Solution
comme indiqué ci-dessus, notre objectif est de positionner l'élément #infoi de façon à ce qu'il apparaisse dans l'élément .navi . Pour ce faire, nous envelopperons les éléments .navi et #infoi dans un nouvel élément <div class="wrapper"> afin de créer un nouveau contexte de position.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
alors créer un nouveau contexte de poste en donnant .wrapper a position: relative .
.wrapper {
position: relative;
}
avec ce nouveau contexte de position, nous pouvons positionner #infoi dans .wrapper . Tout d'abord , donner #infoi a position: absolute , nous permettant de positionner #infoi absolument dans .wrapper .
puis Ajouter top: 0 et right: 0 pour positionner l'élément #infoi dans le coin supérieur droit. Rappelez - vous, parce que le #infoi l'élément utilise .wrapper comme contexte de position, il sera en haut à droite de l'élément .wrapper .
#infoi {
position: absolute;
top: 0;
right: 0;
}
étant donné que .wrapper est simplement un conteneur pour .navi , le positionnement de #infoi dans le coin supérieur droit de .wrapper donne l'effet d'être positionné dans le coin supérieur droit de .navi .
et là nous l'avons, #infoi apparaît maintenant dans le coin supérieur droit de .navi .
Le Résultat
L'exemple ci-dessous est réduit à l'essentiel, et contient un minimum de style.
/*
* position: relative gives a new position context
*/
.wrapper {
position: relative;
}
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}<div class="wrapper">
<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>
</div>L'Autre (Sans Emballage) Solution
dans le cas où nous ne pouvons pas éditer de HTML, ce qui signifie que nous ne pouvons pas ajouter d'élément wrapper, nous pouvons quand même obtenir l'effet désiré.
au lieu d'utiliser position: absolute sur l'élément #infoi , nous utiliserons position: relative . Cela nous permet de repositionner l'élément #infoi de sa position par défaut sous l'élément .navi . Avec position: relative nous pouvons utiliser une valeur négative top pour le déplacer de sa position par défaut, et une valeur left de 100% moins quelques pixels, en utilisant left: calc(100% - 52px) , pour le positionner près du côté droit.
/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/
.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;
}
/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/
#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;
}<div class="navi"></div>
<div id="infoi">
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div> en utilisant un div avec le style z-index:1; et position: absolute; vous pouvez superposer votre div sur tout autre div .
z-index détermine l'ordre dans lequel divs 'stack'. Un div avec plus de 151950920" apparaît en face d'un div avec un taux de 151950920" . Notez que cette propriété ne fonctionne qu'avec les éléments positionnés .
C'est ce dont vous avez besoin:
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style><html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html> suit ici une solution simple 100% basée sur CSS. Le "secret" est d'utiliser le display: inline-block dans l'enveloppe de l'élément. Le vertical-align: bottom dans l'image est un hack pour surmonter le rembourrage 4px que certains navigateurs ajoutent après l'élément.
Conseil : si l'élément avant l'emballage est en ligne, ils peuvent finir imbriqués. Dans ce cas, vous pouvez "envelopper l'emballage" à l'intérieur d'un conteneur avec display: block - généralement un bon et vieux div .
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>Je ne suis pas vraiment un codeur ni un expert en CSS mais j'utilise toujours votre idée dans mes designs web. J'ai aussi essayé différentes résolutions:
#wrapper {
margin: 0 auto;
width: 901px;
height: 100%;
background-color: #f7f7f7;
background-image: url(images/wrapperback.gif);
color: #000;
}
#header {
float: left;
width: 100.00%;
height: 122px;
background-color: #00314e;
background-image: url(images/header.jpg);
color: #fff;
}
#menu {
float: left;
padding-top: 20px;
margin-left: 495px;
width: 390px;
color: #f1f1f1;
}<div id="wrapper">
<div id="header">
<div id="menu">
menu will go here
</div>
</div>
</div>bien sûr, il y aura une enveloppe autour d'eux. Vous pouvez contrôler l'emplacement du menu div qui sera affiché dans l'en-tête div avec les marges de gauche et les positions supérieures. Vous pouvez également définir le menu div pour flotter à droite si vous le souhaitez. Espérons que cette aide.
voici un exemple simple pour amener l'effet de superposition avec l'icône de chargement sur un autre div.
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there*/
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div*/
height:500px; /*Remove this if you have content inside*/
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>
Essayez ici http://jsbin.com/fotozolucu/edit?html,css, sortie