Posição do Elemento em CSS - javascript, html, css, css-position

Ainda sou um novato no uso de CSS .. Eu realmente preciso de ajuda para fazer o pequeno projeto de nossa equipe para o aplicativo móvel: D

Aqui está minha pergunta: D É possível para o CSS colocar "um elemento" acima de "outro elemento" ??

Por exemplo, eu tenho o elemento "uma placa de madeira" e eutem outro elemento "stick" .. Eu gostaria do elemento "stick" atrás do elemento "the wooden board". Então, é como um outdoor: D (Se estiver no Photoshop, podemos apenas arrastar a camada "palitos" abaixo da camada "placa")

Se for possível, como fazer?

Tento procurar algumas fontes, mas não obtive nenhum resultado. Qualquer ajuda seria apreciada: D (código / referência / etc) Muito obrigado

NB: não é possível postar a imagem :( já que comecei a usar o stackoverflow, desculpe :(

Respostas:

1 para resposta № 1

Sim, você pode, existem várias maneiras de conseguir isso.

Primeiro usando position: relative; e z-index(opcional)

Demonstração

<div class="one"></div>
<div class="two"></div>


.one {
height: 100px;
width: 100px;
background: #f00;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: relative;
top: -70px;
left: 30px;
}

2º você pode usar position: absolute; embrulhado dentro position: relative; recipiente

Demo 2

<div class="one">
<div class="two"></div>
</div>

.one {
height: 100px;
width: 100px;
background: #f00;
position: relative;
}

.two {
height: 100px;
width: 100px;
background: #0f0;
position: absolute;
bottom: -30px;
left: 30px;
}

O primeiro exemplo é útil se você tiver 2 elementos separados, você pode usar position: relative; e posicione o elemento de acordo usando top, right, bottom e left propriedades.

O outro exemplo usa position: absolute; mas você viu a mudança na marcação? Eu posicionei absolute a child elemento, que está aninhado dentro position: relative; elemento. Eu preferiria esta solução.

z-index é opcional, digamos, se você deseja exibir o primeiro elemento em vez do segundo

Demonstração

Certifique-se de usar position propriedade que está definida para relative absolute ou fixed Como z-index não funciona static que é a posição padrão.

---

Também gostaria de acrescentar aqui, que não forneci z-index solução para o Demo 2, pois os elementos estão aninhados, então você não pode posicionar um elemento filho atrás do pai, ele herda os elementos pai z-index

---

0 para resposta № 2

Violino

Você só precisa usar z-index propriedade.

Documentação:

http://css-tricks.com/almanac/properties/z/z-index/

http://www.w3schools.com/cssref/pr_pos_z-index.asp

CÓDIGO DE AMOSTRA:

  #hermano-0{//for base layer--zindex is 0
z-index:0;
top:0; left:0;
background:red;
}
#hermano-1{for layer above it we give z-index =1
z-index:1;
top:20px;
left:20px;
background:#a3dbcb;
}
#hermano-N{ for layer above it we give z-index =2
z-index:2;
top:40px;
left:40px;
background:gray;
color:white;
}

---