web-dev-qa-db-fra.com

div en dessous d'un autre div absolu positionné

J'ai un problème avec un div en dessous d'un autre div qui a "position: absolue". J'ai besoin de faire apparaître footer SOUS container div mais maintenant le footer apparaît quelque part derrière le container. Écran: (div avec fond vert est le pied de page) enter image description here

HTML:

<div class="horni-panel">
    <div class="logo">
        Zhlednuto.cz
    </div>

    <div class="menu">
        Home, about atd.
    </div>

</div>

<!-- Mini pozadi -->
<div class="minipozadi">
    ahoj
</div>

<!-- hlavni obsah -->
<div class="container">


Lorem ipsum dolor sit amet. x 40
</div>

CSS:

@font-face
{
    font-family: Lato-Bold;
    src: url(fonts/Lato-Bold.ttf);
}

body
{
    font-family: Myriad Pro;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height: 77px;
    width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}


.minipozadi
{
    height: 282px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    position:absolute;
    top: 85px;
    left:0;
    right:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
    z-index: 100;
    position:absolute;
    top:0;
    right:0;
    left:0;
    margin-top:266px;
    width: 70%;
    background-color: #ffffff;
    border-rder-radius: 5px;
}

.footer
{
margin: 0 auto;
    width: 100%;
    height: 480px;
    background-color: green;
}
htmlcsscss-position
9
voldemord147

Les éléments en position absolue seront supprimés du flux du document. Le pied de page monte donc parce que le conteneur ne fait pas partie de ce flux. Vous devez utiliser soit un positionnement relatif sur les deux, soit un positionnement absolu pour les deux et définir leurs valeurs supérieures et gauches spécifiques.

Alternativement, vous pouvez définir une marge supérieure sur le pied de page qui la fait tomber suffisamment pour qu'elle soit positionnée sous le conteneur.

Vous devez également regarder votre css. Il existe plusieurs propriétés redondantes qui peuvent être en conflit.

body
{
    font-family: arial;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0; left:0;
    height: 77px;  width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}

.minipozadi
{
    height: 100px;  width: 100%;
    position:absolute;
    background-color: blue;
    top: 85px;   left:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    border-radius: 5px;
    z-index: 100;
    position:relative;
    margin: 0 auto;
    top: 120px;
    width: 70%;
    background-color: #fea;
}

.footer
{
    margin-top: 120px;
    width: 100%;
    height: 80px;
    background-color: green;
}

Ici, dans ce violon j'ai supprimé une partie du CSS redondant et utilisé la position: relative sur le conteneur div au lieu d'absolu. La propriété margin-top du pied de page doit être supérieure ou égale à la propriété top du conteneur pour qu'elle reste en dessous.

11
Marcus Baptiste

Au lieu d'utiliser position:relative, Vous pouvez conserver les deux div avec un positionnement absolu en utilisant JavaScript, car cela semble plus proche de ce que vous recherchez.

Ce dont vous avez besoin ici est une fonction qui définira la propriété top du div de pied de page à la valeur exacte dont vous avez besoin.

Voici le code:

document.getElementByClassName("container").style.top = (266 + document.getElementByClassName("footer").offsetHeight) + "px";

Voici l'explication:

document.getElementByClassName().style.top est une méthode HTML DOM utilisée pour changer les propriétés via JavaScript, dans ce cas la propriété est top.

Le 266 Est la quantité de pixels que vous définissez pour la propriété margin-top Pour votre div de conteneur.

La fonction document.getElementByClassName().offsetHeight obtient la hauteur d'un élément en pixels (y compris le remplissage et les bordures).

Enfin, nous ajoutons "px" au nombre, de sorte que la propriété top soit donnée en pixels.

Cette méthode a ses avantages et ses inconvénients:

Avantages: le décalage est basé sur la hauteur du div du conteneur, il est donc toujours positionné directement en dessous du div. Vous pouvez continuer à utiliser non seulement position:absolute, Mais vous pouvez également utiliser cette méthode pour position:fixed.

Inconvénients: Vous devez réécrire le code si vous ajoutez un autre div qui affecterait le positionnement du pied de page. L'alignement ne changera pas si vous redimensionnez la fenêtre sans recharger la page (vous pouvez résoudre ce problème en exécutant le code chaque fois que la hauteur de la fenêtre change.).

0
Quijibo

Utilisez un div de wrapper séparé avec une hauteur de 100% et enveloppez votre conteneur de cette manière, le wrapper suit le flux standard de la page, et le conteneur peut être positionné absolument dans ce wrapper, faites-moi savoir si vous avez besoin d'un exemple de code.

0
Artur Kapłon

Vous pouvez insérer un autre div vierge sur votre div non absolu et lui donner la hauteur comme votre div absolu:

<div class="absoluteDiv">
    <p>something</p>
</div>
<div class="blankDiv">
    //nothing here
</div>
<div class="myDiv">
    <p>some text</p>
    <p>Which is covering absolute div</p>
</div>

CSS:

.absoluteDiv {
    position: absolute;
    left: 0;
}

.myDiv {
    position: relative;
    width: auto;
    padding: 10px;
}

Maintenant, nous pouvons utiliser le code JavaScript pour obtenir la hauteur de div absolue et la donner à notre div vide:

let absoluteDivHeight = document.getElementByClassName('absoluteDiv')[0].offsetHeight;
let blankDiv = document.getElementByClassName('blankDiv')[0];
blankDiv.style.height = absoluteDivHeight + 5 + "px";
0
Guga Nemsitsveridze