Imagem no header e menu

[brunoquadros 0]

Olá, amigos. Gostaria de saber como faço no CSS para uma imagem ficar no header e no menu ao mesmo tempo? Segue uma imagem para ilustrar:

 

 

O fundo branco é o header e a parte onde ficam as patas é o menu.

 

Obrigado!

[Bru_ce 53]

include!

[brunoquadros 0]

Pode dar um exemplo sobre como usá-lo? Obrigado!

[Bergs 53]

depois de definidos o header e o menu, acrescente neles um position: relative; , na imagem (cachorro) adicione a seguinte linha de css:

position: absolute;
right: 20px;
top: 10px;
z-index: 100;

essa é a definição mais ou menos pela imagem que você passou, mas vamos entender os conceitos.

 

a posição relativa do header serve para definir a posição absoluta da imagem, ou seja, as propriedades: left, right, bottom, top serão determinadas pela área do header, no exemplo da sua imagem (cachorro) o posicionamento dela está a partir da direita 20px e do topo 10px de distância relativo ao header.

 

A imagem para ficar por cima do menu precisa receber um valor maior que ele, a propriedade z-index determina a posição dos elementos em camadas, No código que postei determinei 100 no z-index da imagem, mas esse valor poder ser qualquer um contanto que seja maior que o elemento que se deseja sobrepor.

 

faça os testes para entender como funcionar o posicionamento css com position será mais fácil assimilar na prática.

[brunoquadros 0]

depois de definidos o header e o menu, acrescente neles um position: relative; , na imagem (cachorro) adicione a seguinte linha de css:

position: absolute;
right: 20px;
top: 10px;
z-index: 100;

essa é a definição mais ou menos pela imagem que você passou, mas vamos entender os conceitos.

 

a posição relativa do header serve para definir a posição absoluta da imagem, ou seja, as propriedades: left, right, bottom, top serão determinadas pela área do header, no exemplo da sua imagem (cachorro) o posicionamento dela está a partir da direita 20px e do topo 10px de distância relativo ao header.

 

A imagem para ficar por cima do menu precisa receber um valor maior que ele, a propriedade z-index determina a posição dos elementos em camadas, No código que postei determinei 100 no z-index da imagem, mas esse valor poder ser qualquer um contanto que seja maior que o elemento que se deseja sobrepor.

 

faça os testes para entender como funcionar o posicionamento css com position será mais fácil assimilar na prática.

Valeu, Bergs! Serviu perfeitamente!!

 

Ótima explicação também! Vou marcar como Resolvido!

 

Obrigado!