Ik heb hulp nodig bij het overlappen van een individuele divover een andere individuele div.
Mijn code ziet er als volgt uit:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Helaas kan ik de div#infoiof de imgniet nesten in de eerste div.navi.
Het moeten twee afzonderlijke div‘s zijn, zoals weergegeven, maar ik moet weten hoe ik de div#infoiover de div.navien aan de meest rechtse kant en gecentreerd bovenop de div.navi.
Antwoord 1, autoriteit 100%
#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>Antwoord 2, autoriteit 40%
De geaccepteerde oplossing werkt prima, maar IMO mist een verklaring waarom het werkt. Het onderstaande voorbeeld is teruggebracht tot de basis en scheidt de belangrijke CSS van de niet-relevante styling-CSS. Als bonus heb ik ook een gedetailleerde uitleg bijgevoegd over hoe CSS-positionering werkt.
TLDR;als u alleen de code wilt, scrolt u omlaag naar Het resultaat.
Het probleem
Er zijn twee afzonderlijke, broer of zus, elementen en het doel is om het tweede element (met een idvan infoi) te positioneren, zodat het binnen het vorige element verschijnt ( degene met een classvan navi). De HTML-structuur kan niet worden gewijzigd.
Voorgestelde oplossing
Om het gewenste resultaat te bereiken, gaan we het tweede element verplaatsen of positioneren, dat we #infoizullen noemen, zodat het verschijnt in het eerste element, dat we .navi. We willen met name dat #infoiin de rechterbovenhoek van .naviwordt geplaatst.
CSS-positie vereiste kennis
CSS heeft verschillende eigenschappen voor het positioneren van elementen. Standaard zijn alle elementen position: static. Dit betekent dat het element, op enkele uitzonderingen na, in de volgorde in de HTML-structuur wordt geplaatst.
De andere position-waarden zijn relative, absolute, stickyen fixed. Door de positionvan een element in te stellen op een van deze andere waarden is het nu mogelijk om een combinatie van de volgende vier eigenschappen te gebruiken om het element te positioneren:
toprightbottomleft
Met andere woorden, door position: absolutein te stellen, kunnen we top: 100pxtoevoegen om het element 100 pixels vanaf de bovenkant van de pagina te positioneren. Omgekeerd, als we bottom: 100pxinstellen, zou het element 100 pixels vanaf de onderkant van de pagina worden geplaatst.
Hier raken veel CSS-nieuwkomers verdwaald– position: absoluteheeft een referentiekader. In het bovenstaande voorbeeld is het referentiekader het element body. position: absolutemet top: 100pxbetekent dat het element 100 pixels vanaf de bovenkant van het body-element is gepositioneerd.
Het positiereferentiekader, of positiecontext, kan worden gewijzigd door de positionvan een bovenliggend element in te stellen op elke andere waarde dan position: static. Dat wil zeggen, we kunnen een nieuwe positiecontext creëren door een bovenliggend element te geven:
position: relative;position: absolute;position: sticky;position: fixed;
Als bijvoorbeeld een <div class="parent">element position: relativewordt gegeven, gebruiken alle onderliggende elementen de <div class="parent">als hun positiecontext. Als een onderliggend element position: absoluteen top: 100pxzou krijgen, zou het element 100 pixels vanaf de bovenkant van de <div class="parent">element, omdat de <div class="parent">nu de positiecontext is.
De andere factorom rekening mee te houden is stapelvolgorde– of hoe elementen in de z-richting worden gestapeld. Wat u hier moet weten, is dat de stapelvolgorde van elementen standaard wordt gedefinieerd door de omgekeerde volgorde van hun volgorde in de HTML-structuur. Beschouw het volgende voorbeeld:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
In dit voorbeeld, als de twee <div>-elementen op dezelfde plaats op de pagina stonden, wordt het <div>Top</div>-element zou het element <div>Bottom</div>dekken. Aangezien <div>Top</div>na <div>Bottom</div>komt in de HTML-structuur, heeft het een hogere stapelvolgorde.
Antwoord 3, autoriteit 9%
Door een divmet stijl z-index:1;en position: absolute;te gebruiken, kun je je divop een andere div.
z-indexbepaalt de volgorde waarin divs ‘stapelen’. Een div met een hogere z-indexverschijnt voor een div met een lagere z-index. Merk op dat deze eigenschap alleen werkt met gepositioneerde elementen.
Antwoord 4, autoriteit 7%
De nieuwe Grid CSS-specificatie biedt een veel elegantere oplossing. Het gebruik van position: absolutekan leiden tot overlappingen of schaalproblemen, terwijl Grid je zal behoeden voor vuile CSS-hacks.
Voorbeeld van meest minimale rasteroverlay:
HTML
<div class="container">
<div class="content">This is the content</div>
<div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>
CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
Dat is het. Als je niet voor Internet Explorer bouwt, zal je code waarschijnlijk werken.
Antwoord 5, autoriteit 2%
Hier volgt een eenvoudige oplossing die 100% gebaseerd is op CSS. Het “geheim” is om het display: inline-blockin het wrapper-element te gebruiken. De vertical-align: bottomin de afbeelding is een hack om de 4px-padding te omzeilen die sommige browsers na het element toevoegen.
Advies: als het element voor de wrapper inline is, kunnen ze genest worden. In dit geval kunt u de verpakking “verpakken” in een container met display: block– meestal een goede en oude 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="https://placehold.it/450x250" />
</div>Antwoord 6, autoriteit 2%
Dit is wat je nodig hebt:
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>Antwoord 7
Ik ben niet zo’n codeur of expert in CSS, maar ik gebruik je idee nog steeds in mijn webontwerpen. Ik heb ook verschillende resoluties geprobeerd:
#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>Antwoord 8
Je moet een ouder toevoegen met een relative position, binnen deze ouder kun je de absolute positionvan je divs
instellen
<div> <------Relative
<div/> <------Absolute
<div/> <------Absolute
<div/> <------Absolute
<div/>
Eindresultaat:
https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100
<div class="container">
<div class="header">TOP: I am at Top & above of body container</div>
<div class="center">CENTER: I am at Top & in Center of body container</div>
<div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>
HTML-tekst op volledige breedte instellen
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Daarna kunt u een div instellen met de relatieve positie om de volledige breedte en hoogte in te nemen
.container {
position: relative;
background-color: blue;
height: 100%;
width: 100%;
border:1px solid;
color: white;
background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-color: #cccccc;
}
Binnen deze div met de relatieve positie kun je je div met absolute posities plaatsen
BOVENAAN boven de container
.header {
position: absolute;
margin-top: -10px;
background-color: #d81b60 ;
left:0;
right:0;
margin:15px;
padding:10px;
font-size: large;
}
Op BODEM boven de container
.footer {
position: absolute;
background-color: #00bfa5;
left:0;
right:0;
bottom:0;
margin:15px;
padding:10px;
color: white;
font-size: large;
}
In MIDDEN boven de container
.center {
position: absolute;
background-color: #00bfa5;
left: 30%;
right: 30%;
bottom:30%;
top: 30%;
margin:10px;
padding:10px;
color: white;
font-size: large;
}
Antwoord 9
Hier is een eenvoudig voorbeeld om een overlay-effect met een laadpictogram over een andere div te brengen.
<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>
Probeer het hier: http://jsbin.com/fotozolucu/edit?html ,css,uitvoer