Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kaayasinho

Problema com POSITION:RELATIVE

Por , em Desenvolvimento frontend

Recommended Posts

kaayasinho    0

kaayasinho
Postado

Boa tarde,

 

Gostaria de saber porque, eu estou usando o position relative para poder usar as tags TOP BOTTOM LEFT RIGHT em vez de margin.

 

Mase sempre que eu dou um valor ao TOP. ele sobrepoe a div embaixo. no caso é uma section que seria a outra pagina

 

aqui esta o exemplo, vc vera que o conteúdo da 1 section vai sobrepor o inicio da 2 section. exatamente nos pixels que eu dei no top..

se eu der top:100px vai sobrepor 100px.. existe alguma forma dela crescer a div em vez de sobrepor a proxima?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<style>
*{
margin:0;	
	}
	html,body{
		height:100%;
		min-height:100%;
		background:#fff;
		}
	header{
		width:100%;
		height:50px;
		background:#F00;
		color:#fff;
		position:fixed;
		opacity:0.7
		}
		#section1{
			top:50px;
			min-height:100%;
			width:100%;
			background:#000;
			color:#fff;
			}
		article{
			position:relative;
			top:100px;
			}	
		#section2{
			min-height:100%;
			width:100%;
			background:#FF0;
			color:#fff;
			}	
</style>

</head>

<body>
   <header>
   vaijao
   </header>
   
   <section id="section1">
		<article id="article1">
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        		<p class="centraliza"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>


        </article>
   </section>
   
    <section id="section2">
        
   </section> 
</body>
</html>

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Santos Brito    12

Lucas Santos Brito
Postado

kaayasinho, esta tentando fazer da forma inversa.

Tente utilizar a propriedade "margin" ao invés de alterar o posicionamento do elemento.

Desta forma,

article{
	position:relative;
	margin-top:100px;
}

Leia também um pouco sobre a propriedade display.

 

 

Quanto ao auto ajuste de altura do elemento, leia o que escrevi neste tópico:

TÓPICO

 

Espero ter ajudado, abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

kaayasinho, esta tentando fazer da forma inversa.

Tente utilizar a propriedade "margin" ao invés de alterar o posicionamento do elemento.

Desta forma,

article{
	position:relative;
	margin-top:100px;
}

Leia também um pouco sobre a propriedade display.

 

 

Quanto ao auto ajuste de altura do elemento, leia o que escrevi neste tópico:

TÓPICO

 

Espero ter ajudado, abraços.

 

se eu coloco margin-top, ele da o espaço, mas desce toda a section junto.. a margem vai referente ao topo do navegador

 

Obriado

vou dar uma olhada nesse topicos

kaayasinho, esta tentando fazer da forma inversa.

Tente utilizar a propriedade "margin" ao invés de alterar o posicionamento do elemento.

Desta forma,

article{
	position:relative;
	margin-top:100px;
}

Leia também um pouco sobre a propriedade display.

 

 

Quanto ao auto ajuste de altura do elemento, leia o que escrevi neste tópico:

TÓPICO

 

Espero ter ajudado, abraços.

Cara dei uma lida no display, resolveu meu problema

 

display:inline-block!

 

obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Santos Brito    12

Lucas Santos Brito
Postado

Realmente se determinar "margin-top", o elemento principal seguirá a instrução.

Quanto a propriedade display, salva vidas né ? :yes:

 

Conte sempre, forte abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

Realmente se determinar "margin-top", o elemento principal seguirá a instrução.

Quanto a propriedade display, salva vidas né ? :yes:

 

Conte sempre, forte abraço.

 

sim. hahaha tinha esquecido dela..

Salvou completamente minha vida

 

muito obrigado abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito