Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) position:relative não funciona como esperado

Rafael Laurindo

Perguntado por Rafael Laurindo,

 Share

Pergunta

Rafael Laurindo

Rafael Laurindo

Postado
Postado (editado)

Pessoal, o position:relative num coloca a div a baixo da imediatamente inferior? Então, no html abaixo a última div de id line está alinhada verticalmente com o linha anterior, sendo que o position de ambas é relative. Isso não faz sentido. Se possível testem para ver.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SIGEC</title>
<style type="text/css">
    @import url("css/certificado.css");
</style>
</head>
<body>

    <div id="line">
        <div class="lbSign" style="text-indent:3cm;" >O diretor do</div>
        <div class="sign" style="left:51mm;">Liceu de Humanidades de Campos</div>
        <div class="signLine" style="left:51mm;">————————————————————————— </div>
        <div class="lbSign" style="direction:rtl; right:3mm;"> nos termos do artigo 24, inciso VII da lei 9.394 de</div>
    </div>
    
    
    <div id="line">
        <div class="lbSign">20 de dezembro de 1996, confere a</div> 
        <div class="sign" ><?php //echo $_COOKIE['alunoNome'] ?></div><!--  -->
        <div class="signLine" > ————————————————————————— </div> <!-- -->
    </div>

</body>
</html>
CSS 
div#line{
    position:relative;
    margin-top:4mm;
}

.lbSign{
    text-indent:1.5cm;
    line-height: 0px;
    position:absolute;
    top:0px;
}

.sign{
    font-family:arial;
    font-size:19pt;
    line-height:0px;
    position:absolute;
    top:-3px;
}

/* linha comum */
.signLine{
    line-height:0px;
    position:absolute;
    top:6px;
}

Alguém poderia me dar uma luz.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado (editado)

Então, mas, pela lógica, ele sempre da uma quebra com relação a anterior. Portanto, só é posssível com o position:relative, colocar duas divs uma do lado da outra manipulando o bottom da mais inferior, como no exemplo abaixo, e não é o meu caso aí. Eu sempre uso um arquivo em separado para ficar fazendo os testes, ao invés de bagunçar meu código, e não sou expert em design, só uso o CSS e js para efeitos mesmo, e o js, para algumas coisitas à mais, não uso flash nem nada disso, pra mim é irrelevante. o CSS fascilita ao máximo o design, bendito é quem ou aqueles que o projetou. Nem sempre eu gosto de coisas prontas, mas sempre gosto de coisas que fazem sentido, como o CSS, com o qual podemos posicionar o objeto de forma precisa. Testa por gentileza e me fale o que achou.

<div style="position:relative; border: solid black 1px; height:200px; width:200px; margin:0px;">
    </div>
    
    <div style="position:relative; border: solid black 1px; height:100px; width:100px; margin:0px; bottom:202px;">
    </div>

O CSS tem comando para quebrar linha? Ou só da para fazer isso com o br mesmo do html?

P.S. Você gosta de avatars né, rs. Já trocou umas três vezes. Acho maneiro, mas estou sempre correndo, nem tenho tempo. Mas depois você me fala o site que faz essa "paradinha".

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Opa, entendi seu raciocinio, na verdade o CSS é muito amplo, e com ele conseguimos fazer a mesma coisa de 2 ou mais formas, tudo varia de como os outros elementos estão na página.

Respondendo sua pergunta, para quebrar linha só o <br> mesmo.

Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Bom, nesse ultimo código que mandou, a div está uma por cima da outra, e o que você precisa é deixar do lado ou embaixo?

Agora confundiu minha cabeça, rs, explique exatamente aonde precisa deixa-las. Com o CSS agente consegue deixa-las em qualquer lugar.

Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Bom vamos por partes, apenas isso já é o suficiente para deixar uma div embaixo da outra.

<div style="border: 1px solid black; height: 200px; width: 200px;">
    </div>
    
    <div style="border: 1px solid black; height: 100px; width: 100px;">
    </div>
O position relative coloca a div em seu local de origem, o fato de você colocar a primeira div com position relative, faz com que a segunda fique por cima. Veja se isso te ajuda: 
<div style="height:20px; width:100%; border-bottom:1px solid #000;"></div>
<div style="height:20px; width:100%; border-bottom:1px solid #000;">linha 1</div>
<div style="height:20px; width:100%; border-bottom:1px solid #000;">linha 2</div>
<div style="height:20px; width:100%; border-bottom:1px solid #000;">linha 3</div>
<div style="height:20px; width:100%; border-bottom:1px solid #000;">linha 4</div>
<div style="height:20px; width:100%; border-bottom:1px solid #000;">linha 5</div>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...