div en dessous d'un autre absolu placé div

J'ai un problème avec un div en dessous d'un autre div qui a de la "position: absolute".
J'ai besoin de faire pied de page apparaissent SOUS conteneur div mais maintenant, le pied de page apparaît quelque part derrière le conteneur.
Écran: (div avec un fond vert est le pied de page)
div en dessous d'un autre absolu placé div

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;
}
Savez-vous que, lorsque "position: absolute" est utilisé, 'HTML' élément pour lequel il est utilisé devient indépendant de son élément parent & l'élément parent n'a pas la moindre idée de ses dimensions.

OriginalL'auteur voldemord147 | 2015-05-31

  1. 9

    Éléments en position absolue sera supprimé à partir du flux du document. De sorte que le pied se déplace vers le haut parce que le conteneur n'est pas une partie de ce flux. Vous devez soit utiliser le positionnement relatif sur les deux, ou de positionnement absolu pour tous les deux et fixer leurs propres valeurs haut et gauche.

    Vous pouvez également définir une marge supérieure sur le pied de page qui fait tomber assez de sorte qu'il est positionné au-dessous du conteneur.

    Vous avez aussi besoin de regarder votre css. Il y a plusieurs redondant propriétés qui sont potentiellement contradictoires.

    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 cette violon j'ai enlevé une partie de la redondante css et utilisée position:relative sur le conteneur div à la place de l'absolu. Le margin-top de propriété sur le pied de page doit être supérieure ou égale à la propriété top sur le conteneur afin qu'elle puisse rester en dessous.

    OriginalL'auteur Marcus Baptiste

  2. 0

    Au lieu d'utiliser position:relative, vous pouvez garder les deux de la div avec le positionnement absolu à l'aide de JavaScript, qui semble plus proche de ce que vous cherchez.

    Ce dont vous avez besoin ici est une fonction qui va définir la top propriété du pied de page div à la valeur exacte que vous en avez besoin pour être.

    Voici le code:

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

    Voici la explenation:

    document.getElementByClassName().style.top est un DOM HTML méthode utilisée pour modifier des propriétés à l'aide de JavaScript, dans ce cas, la propriété est top.

    La 266 est le nombre de pixels que vous avez défini pour la propriété margin-top de votre conteneur div.

    La document.getElementByClassName().offsetHeight fonction obtient la hauteur d'un élément en pixels (y compris rembourrage et des frontières).

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

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

    Pour:
    le décalage est basé sur la hauteur de la div conteneur, de sorte qu'il est toujours positionné directement au-dessous de la div. Vous pouvez continuer à l'utiliser non seulement position:absolute, mais vous pouvez utiliser cette méthode pour position:fixed.

    Contre: Vous devez réécrire le code, si vous ajoutez un autre div qui aurait une incidence sur le positionnement du pied de page. L'alignement ne changera pas si vous redimensionnez la fenêtre sans avoir à recharger la page (vous pouvez résoudre ce problème en exécutant le code à chaque fois la hauteur de la fenêtre de modifications.).

    OriginalL'auteur Quijibo

  3. 0

    Vous pouvez insérer un autre vide div sur votre non-absolu div et lui donner de la hauteur, comme a votre entière div:

    <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 JavaScript code pour obtenir la hauteur absolue de la div et de le donner à notre vide div:

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

    OriginalL'auteur Guga Nemsitsveridze