0

Bom, é o seguinte, eu tenho diversas divs, que estão contidas numa div de id="container". Umas, pretendo que fiquem mais em cima que outras, contudo eu pretendia fazer margin-top, de todas relativamente a um só ponto, e não umas paras outras. Ou seja, sempre que faço margin-top, é relativamente á div container.

Não sei se é possível fazer isso, se for como posso fazer?

Obrigado.

1

1 Resposta 1

1

O melhor seria colocares as divs internas em posição absolute:

#container {
  position: relative; /* importante */
}
div.inner {
  width: 100px;
  height: 50px;
  position: absolute;
}
div.inner:nth-child(even) {
  background-color: blue;
}
div.inner:nth-child(odd) {
  background-color: green;
}
div.inner:nth-child(1) {
  margin-top: 0;
}
div.inner:nth-child(2) {
  margin-top: 10px;
}
div.inner:nth-child(3) {
  margin-top: 20px;
}
div.inner:nth-child(4) {
  margin-top: 30px;
}
div.inner:nth-child(5) {
  margin-top: 40px;
}
<div id="container">
  <div class="inner">div1</div>
  <div class="inner">div2</div>
  <div class="inner">div3</div>
  <div class="inner">div4</div>
  <div class="inner">div5</div>
</div>
  

8
  • Obrigado Miguel, consegues-me só explicar o que é o nth-child?
    – Gonçalo
    Commented 16/03/2017 às 18:11
  • Neste caso é o mesmo que dizeres, quero a primeira/segunda/terceira... div com a classe inner @Gonçalo
    – Miguel
    Commented 16/03/2017 às 18:12
  • Todas as divs, precisam de ter a mesma class, para que funcione?
    – Gonçalo
    Commented 16/03/2017 às 18:14
  • Não claro que não @Gonçalo, isso foi só para facilitar o exemplo, mas se quiseres estilizar uma a uma com css tens de arranjar maneira de selecionares cada uma, por id, class desde que as consigas selecionar tanto faz etc....
    – Miguel
    Commented 16/03/2017 às 18:16
  • Então os aspetos importantes para que funcione é só ter o relative, na div principal e o absolute, nas que ficam dentro certo? Desculpa lá a massada, mas estou a aprender css eheh
    – Gonçalo
    Commented 16/03/2017 às 18:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .