CSS - Position: relative; VS Position: absolute;

Question

CSS - Position: relative; VS Position: absolute;

Navigation

#1 by (1 votes)

1

Good evening guys, I'm having a problem about letting my site be responsive. What happens is this ...

I have my menu, which contains 2 LI " ADD VALUE ," CREATE ROUTINE ". And I want to make them responsive, the NAV they are in, I was able to leave responsive by adding Position: relative; , but when I reduce browser resolution only the NAV remain responsive, my LI , do not redimension.

TheredbordersaretoillustratewhereCSSisaffecting.

I'vetriedPosition:relative;inULinLI,IalsotriedPosition:absolute;,butnothinghelped,myLIstilldonotresizewithbrowserresolution.

MyHTMLcodeisasfollows:

<navid="menu">
    <ul>
        <li><a href="salario.html">Adicionar Valor</a></li>
        <li><a href="rotina.html">Criar Rotina</a></li>
    </ul>   
</nav>

My CSS code looks like this:

body{
background-color: #e6a017;
margin:0;
padding:0;
}
nav{

background-color: white;
top: -16px;
position: relative; 

}

nav a{
text-decoration: none;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bolder;
}
nav a:hover{
color: white;
}
nav ul{
border: 8px solid red;
list-style: none;
text-transform: uppercase;  
right: -980px;
position: relative;
display: block;


}
nav li{

display: inline-block;
padding: 10px;  
margin-right: 10px;

}
nav li:hover{
background-color: #e6a017;
transition: 1s;

}

RESOLVED

I've changed the line of css "right: -980px;" from nav ul to text-align: right; strong>

html5 css css3 layout-responsivo

asked by anonymous 18.12.2018 / 02:32

1 answer

Replace on an object Return only the name of the file in the view

score 1 · Accepted Answer

You're pulling the list to the right with right: -980px; , which is wrong, making it exit the nav area. To do something responsive, you will rarely use dimensions with px (usually on elements with fixed sizes or that may vary in certain breakpoints), and will use % , em or rem . But the very question is this negative right of 980px, which makes no sense and is not about responsiveness.

If you want to align the lists from the list to the right, just use text-align: right :

body{
background-color: #e6a017;
margin:0;
padding:0;
}
nav{

background-color: white;
top: -16px;
position: relative; 

}

nav a{
text-decoration: none;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bolder;
}
nav a:hover{
color: white;
}
nav ul{
border: 8px solid red;
list-style: none;
text-transform: uppercase;  
/*right: -980px;*/
text-align: right; /* aqui alinha o texto para a direita*/
position: relative;
display: block;


}
nav li{

display: inline-block;
padding: 10px;  
margin-right: 10px;

}
nav li:hover{
background-color: #e6a017;
transition: 1s;

}

<nav id="menu">
    <ul>
        <li><a href="salario.html">Adicionar Valor</a></li>
        <li><a href="rotina.html">Criar Rotina</a></li>
    </ul>   
</nav>