Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fckruz

[Resolvido] Posicionar div sobre outras div

Por , em Desenvolvimento frontend

Recommended Posts

fckruz    2

fckruz
Postado

Pessoal estou com uma duvida que apareceu durante a diagramação, qual a melhor maneira de posicionar uma div em cima de outras divs, vejam o desenho a seguir:

 

95159250.jpg

 

que funcione e todos os navegadores e sem usar tabelas.

 

Obrigado a todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alcaidedigital    57

alcaidedigital
Postado

Use algo como:

 

#minhaDiv{
position:absolute;
z-index:5;
margin-left:90px;
margin-top:20px;
}

 

Onde #minhaDiv será o seletor da sua div

position:absolute; para você conseguir fazer ela "flutuar" na tela (poderia usar float: porem não iria conseguir manipular tão bem quanto).

z-index para forçar estar acima dos outros elementos.

as margens é para posicionar melhor na tela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hufersil    145

hufersil
Postado

Exemplo:

 

http://www.hufersil.com.br/exemplo/posicionamento.html

 


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>

<style type="text/css" media="screen">
* {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}	

#main {
	position: relative;
	width: 700px;
	margin: 0px auto 0px auto;
	background-color: #EFEFEF;
}

#header {
	height: 50px;
	background-color: #CCCCCC;
}

#content {
	height: 300px;
	background-color: #EFEFEF;
}

#logo {
	margin: 10px auto auto 20px;
	width: 70px;
	height: 70px;
	background-color: #CCCCCC;
	border: 1px solid black;
	position: absolute;
	z-index: 10;
}

</style>

<body>

	<div id="main">
		<div id="logo"></div>
		<div id="header"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</div>

</body>
</html>

 

@braços e fique com Deus!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito