Duvida iniciante sobre position relative e absolute


(Henrique ) #1

Galera, tenho uma dúvida, acredito que seja bem simples, vamos lá:
Não consigo deixar o os itens da lista do menu, dentro do menu (vermelho) por exemplo, ai deixar o right 0. ele foge do quadrado vermelho e acaba indo pro extremo direito de toda a tela. Como posso deixar o menu se movimentando somente dentro do quadro vermelho? Segue o código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
*{
	padding: auto;
	margin: auto;
}
.menu {
	background-color: red;
	width: 800px;
	height: 100px;
}

.menu ul{
	position: absolute;
	right: 0px;
}

.menu ul li{
	display:inline-block;
	padding-right: 20px;
	padding-left: 20px;
}

</style>



</head>

<body>
<nav class="menu">
	<ul>
    	<li> primeiro </li>
        <li> segundo </li>
        <li> terceiro </li>
        <li> quarto </li>
    </ul>
</nav>

</body>
</html>

(Rafael França Marques da Silva) #2

utilize position: relative; dentro do .menu.

O position: absolute; é dentro do último elemento definido com com algum position.

Então se vc define o .menu como relative, vc corrige seu código.

http://tableless.github.io/iniciantes/manual/css/position.html

Espero ter ajudado.


(Robson Vital) #3

Acredito que algo assim seria melhor para controlar


(Henrique ) #4

Obrigado @euconectei e @tiobobs pela ajuda. Consegui compreender bem :grinning:


(Henrique ) #5

Desculpa abusar da boa vontade. Mas poderia postar de novo? Eu tinha deixado aberto pra fuçar com mais calma o código e agora saiu do ar


(Robson Vital) #6

Desculpe, pensei que ja tinha fechado esse tópico.

Mais coloquei de novo no mesmo comentário.


(Henrique ) #7

Obrigado de novo, cara! :grinning: