How do I position two Ivs relative to a third (Fixed)?

Asked

Viewed 199 times

0

I want two Ivs below a third that has position: fixed, the problem is that these Divs are behind the third, I’ve tried to change the position of the two Divs to relative, Absolute and Static, but it doesn’t work.

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>blogg</title>
<link type="text/css" rel="stylesheet" href="MeuCss.css">
</head>

<body>
<div id = "header">
    <p id = "nome">Titulo/Logo</p>
    <p class = "data">dd/mm/aaaa</p>
    </div>
    <div class = "left"></div>
    <div align="left"></div>
    <div class = "right"></div>
    <div id = "footer"></div>
    <div class = "divLink">
    <a href = "http://www.facebook.com"></a>
    </div>
    </body>
</body>
</html>

CSS

div{
    border-radius: 5px;   
}

#header{
    z-index: 1;
    font-family: Arial;
    width: 97.5%;
    height: 50px;
    background-color: #FFCC99;
    margin-top: -15px;
    position: fixed;
margin-bottom: 7px;
}

.data{
    float:right;    
margin-right: 5px;
}

.left{
display:inline-block;
    width: 100px;
    height: 300px;
    background-color: #99CCFF;
    float: left;
    margin-bottom: 7px;
margin-right: 7px;
}

.right{
margin-left: 7px;
margin-bottom: 7px;
width: 300px;
height: 300px;
background-color: #00CC99;
float: left;
}

#footer{
    position: relative;
    clear: both;
    height: 50px;
    background-color: #0066FF;
    width: 98.5%;
    margin-bottom: 5px;

}

#nome{
    margin-left: 5px;   
    color:#009999;
    float: left;
display: inline-block;
}

#email{
    margin-right: 5px;
    float: right;
    color:#009999;
}   

.divLink{
    position: static;   
    width: 50px;
    height: 50px;    
}

.divLink a{
    display: block;
    background-image: url("http://goo.gl/xPi76J");
    background-size: 50px 50px;
background-repeat:no-repeat;
    width: 50px;
    height: 50px;
    border-radius:5px;
}



.divLink a:hover{
    display: block;
    border-radius: 5px;
    background-image: url("http://goo.gl/9t07bt");
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
background-repeat:no-repeat;
}

Upshot:

inserir a descrição da imagem aqui

html css positioning

2 answers

1


Friend, do it like this:

  • Add a div around everything, you can call it .wrap
  • In this div, add a margin-top or padding-top of the same size as the div that is with position Fixed.

This way, the content of the page will always start below the .header ;)

  • Thanks, I got it done that way.

0

  • Couldn’t I put margin-top in relation to the div header? That way it really works, but I wanted the Divs to position themselves in a "correct way"

  • You’re using position: Fixed, I don’t know if there’s another way to do it.

Browser other questions tagged html css positioning

You are not signed in. Login or sign up in order to post.