CSS CSS - Como usar "Position: Relative"

[Joao909]

Gente eu não entendo quase nada de CSS, mas digamos que:

.main{
}
.sidebar{
}

eu quero usar posição relativa na "sidebar" tomando "main" como referencia. Alguém ajuda?

[DiF]

@Joao909 A posição relativa geralmente é usada em conjunto com a posição absoluta quando se quer posicionar um elemento com referência a outro.

 

Exemplo:

Um elemento DIV, onde dentro dele quer posicionar um outro elemento DIV na parte de baixo.

 

<div class="box">
  
  <div class="texto">teste</div> 
</div>

.box{
  position: relative;
}

.texto{
  position: absolute;
  bottom: 0;
}

Basicamente estamos informando que o elemento div.texto vai ficar em uma posição absoluta no bottom em relação ao elemento div.box

 

Você também pode usar a posição relativa para posicionar os outros elementos do layout.

 

Deixo, dois links de estudo:

https://www.maujor.com/tutorial/absrel.php

https://www.devmedia.com.br/position-css-definindo-a-posicao-de-elementos-com-fixed-relative-e-absolute/37700

[Joao909]

Obrigado, mas acho que não expliquei direito... Não estou mexendo com HTML..

<div class="box">
  
  <div class="texto">teste</div> 
</div>

É como se eu quisesse:

.main{
}
.sidebar{
/*informar aqui a posição relativa a partir do topo e da direita tomando "main" como referencia*/
}

 

[DiF]

@Joao909 

Mas no seu caso, o "main" não tem regra alguma. Não dá para posiciona-los do jeito que quer.

Ademais, como está estrutura do seu HTML?

Usando a posição relativa, em conjunto com o left, bottom, right e top, você move o elemento para onde quiser, mas ainda ele vai preservar o espaço destinado a ele.

 

Diferente da posição absoluta que move o elemento e o que está depois dele passa a ocupar o espaço do que foi movido.

Você ainda não explicou exatamente o que você quer. Não está claro.

 

Pelo que entendi, você quer colocar o elemento .sidebar logo abaixo do elemento .main?

 

Quanto ao exemplo que dei no HTML no outro post, era somente para você visualizar a explicação da regra. 

No caso, quando quer posicionar um elemento e forma absoluta dentro de outro elemento.

 

[Joao909]

Eu quero colocar uma barra lateral usando o centro para quando dar zoom na página ficar no mesmo lugar sabe mas isso não existe em css então eu quero, usando um elemento já centralizado que usou margin-left:auto;   margin-right:auto;

.artigos{
margin-left: auto; 
margin-right: auto;
}
.barralateral{
}

conseguir o que eu acabei de falar.

[Joao909]

Muito obrigado parece que enfim resolvi meu problema voce estava certo o tempo todo só que tinha algumas coisas que eu tive que descobrir sozinho. Só tenho mais uma pergunta: esse é o unico jeito de usar "relative"?