Div

[Videres 3]

Boa tarde pessoal,

 

Gostaria de saber se é possivel colocar uma div sobre a outra sem precisar usar o absolute...

 

Porque estou criando um site onde ao inserir o conteúdo o layout se ajuste automaticamente ao tamanho do conteudo.. com

position:relative;

funcionou, porem eu n consigo colocar uma div sobre a outra...

 

Ja tentei o seguint codigo

 

<div id="content">
   <div id= "exemplo1"> </div>
   <div id= "exemplo1"> </div>
   <div id= "clear"> </div>
</div>

<!-- CSS -->
  ....
   #content # exemplo1{
      float:left;
      width:200px;
      margin:? ?;
      top:?;
      left:?;
      position:relative;


   }

     #content # exemplo2{
      float:right;
      width:200px;
      margin:? ?;
      top:?;
      left:?;
      position:relative;


   }

   #content #clear{
      clear:both;

   } 

<

 

Dessa forma ate consegui fazer, mas me deparei com uma situacao em q tenho q fazer isso uma dentro da outra e n to conseguindo!

 

 

Se alguem puder me dar uma dica ou orientacao de estudo fico agradecido! abraço =D

[GabrielFerrari 41]

z-index só funciona com absolute.

Mas de uma pesquisada e faça uns testes que irá conseguir.

 

qualquer problema ou dúvida poste :)

[Videres 3]

z-index só funciona com absolute.

Mas de uma pesquisada e faça uns testes que irá conseguir.

 

qualquer problema ou dúvida poste :)

 

n conseguir com z-index...

 

mas s funcionasse com

position:relative

ia ser excelente \o..

 

Estou pesquisando alguma coisa relacionada...

 

Vlws mesmo \o

[Diegus Miestro 21]

Dessa forma ate consegui fazer, mas me deparei com uma situacao em q tenho q fazer isso uma dentro da outra e n to conseguindo!Se alguem puder me dar uma dica ou orientacao de estudo fico agradecido! abraço =D

 

Cara, tem certeza de que vocês não quer colocar uma DIV dentro da outra ao invés de "por cima"?

[Videres 3]

Cara, tem certeza de que vocês não quer colocar uma DIV dentro da outra ao invés de "por cima"?

 

Seria algo mais ou menos assim:

 

<div id="content">
 <div id="bloc1"></div>
 <div id="bloc2">
   <div id="ctd1"></div>
   <div id="ctd2"></div>
   <div class="limp_clear1"></div>
 </div>
 <div class="limp_clear2"></div>

</div>

 

A estrutura é por ai... e tipo as divs estao definidas com

position:relative;

para ao inserir conteudo a pagina se ajustar automaticamente...

 

Sendo assim, eu queria fazer com que a "div id='bloc2'" ficasse sobreposta a "div id='bloc1'"... tipo isso com position:absolute é fichinha... mas ai vem o problema, quando uso a pagina n se ajusta ao conteudo...

 

Tentei com float dai deu certo.. seguindo esse modelo acima.. usando o

clear:both;

Queria ver se tinha outro jeito de colocar divs com

position:relative;

uma sobre a outra...

 

se alguem souber e compartilhar agradeço muito!!!

 

Abraço.. Vlws

[Thiago Moraes 32]

Tem alguma imagem ou site pra exemplificar o que exatamente você quer? Se as divs vão se sobrepor, pq o layout tem se ajustar automaticamente?

 

Por que usou position relative em todas as divs? Tá bem confusa a sua dúvida, mas imagino que seja algo simples de resolver.

[Henrique Barcelos 290]

z-index só funciona com absolute.

Errado, funciona para relative a absolute.

 

O problema aí é outro.

position: absolute tira o elemento do fluxo da página, ele fica "boiando" sobre os outros.

position: relative mantém o elemento no fluxo normal. Você pode alterar sua posição utilizando as propriedades left, top, right e bottom, mas o comportamento nem sempre é o esperado.

 

Ajudaria se você conseguisse montar um esquemático aí do que você deseja.

[GabrielFerrari 41]

Errado, funciona para relative a absolute.

 

Essa é nova para mim,

nunca vi. Vou tentar hoje a tarde para ver qual que é.

[Videres 3]

Errado, funciona para relative a absolute.

 

O problema aí é outro.

position: absolute tira o elemento do fluxo da página, ele fica "boiando" sobre os outros.

position: relative mantém o elemento no fluxo normal. Você pode alterar sua posição utilizando as propriedades left, top, right e bottom, mas o comportamento nem sempre é o esperado.

 

Ajudaria se você conseguisse montar um esquemático aí do que você deseja.

 

 

Como você falou..

position:absolute deixa o conteudo da pagina "boiando"..

e se eu usar left, top, right e bottom fico com o problema da margem...

 

O motivo de usar position:relative é justamente pq ele mantem o elemento no fluxo normal... pq tipo quando altero o conteudo do centro da minha pagina eu consigo fazer com que minha pagina se ajuste ao conteudo alterado... quando uso absolute tenho q ajustar manualmente =/ ..... talvez seja por falta de conhecimento... eheheheh

 

Vou tentar postar o codigo aqui.. assim q possivel.. mas a estrutura seria como essa abaixo...

 

<div id="content">
 <div id="bloc1"></div>
 <div id="bloc2">
   <div id="ctd1"></div>
   <div id="ctd2"></div>
   <div class="limp_clear1"></div>
 </div>
 <div class="limp_clear2"></div>

</div>

 

queria fazer com que id:bloc2 ficasse sobre bloc1.. mas n queria q ele ficass boiando na pagina.. pq ao inserir conteudo caso ele seja um texto muito grande ele vai boiar por toda pagina passando por cima do rodape por exemplo... e eu queria q ao inserir conteudo o rodape se ajustass ao tamnho do conteudo na verdade a pagina em si...

n sei se ta dando para entender...

 

Talvez seja uma coisa simples e eu n esteja notando por falta de conhecimento... =P

 

So fosse possivel colocar uma div com position:relative sobre a outra sem usar o top ou left... com o z-index tb n consegui... seria excelente rrssrsrsr

 

ps.: eu tentei usar o top e left.. e controlar as margens com padding-bottom mas n rolou... pq fiz um codigo javaScript onde a div="bloc2" so sera visualizada ao clicar em um botao.. dai quando alterei o padding-bottom fiz com que o rodape passasse ficasse em cima da div="content" enquanto a div="bloc2" por exemplo estava invisivel...

 

Vlwss

[Evandro Oliveira 331]

Não vi dificuldade nisso.

 

position relative,

z-index

e margin

 

<style>
#first {
background: blue;
height: 300px;
}

#second {
background: yellow;
height: 250px;
margin-top: -150px;
position: relative;
width: 60%;
}
</style>

<div id="first"></div>
<div id="second"></div>