Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
>
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:
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:
Espero ter ajudado, abraços.
Cara dei uma lida no display, resolveu meu problema
display:inline-block!
obrigado
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.
>
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
kaayasinho, esta tentando fazer da forma inversa.
Tente utilizar a propriedade "margin" ao invés de alterar o posicionamento do elemento.
Desta forma,
article{
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.