Conflito entre os position

emilyoly · Maio 10, 2015

Boa tarde pessoal.

Bem estou com o seguinte problema, queria um menu fixo , até consegui com o positon fixed, mas esta entrando em conflito com outro position do category q é relative.

Quando rolo a pagina, o category sobrepoem o menu , ficando assim:

Aproveitando também, queria saber a forma correta de posicionar o menu de redes sociais , q nao estou conseguindo, fiz uma gambiarrinha com o margin top negativo.

Segue o codigo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Teste</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="wrapper"> <!--tudo-->

	<header id="topo">
	  <div class="menu2">
		<nav class="menu">
			<ul class="menu-top">
				<li><a href="index.php">Home</a></li>
				<li><a href="#">Sobre</a></li>
				<li><a href="#">Portifolio</a></li>
				<li><a href="blog.php">Blog</a></li>
				<li><a href="#">Contato</a></li>
			</ul>
		</nav>
		<!--Nav Menu-->

		<div class="social">
			<a href="#"><img src="images/tumblr.gif" height="30" width="30" alt="Tumblr"></a>
			<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Pint"></a>
			<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Tumblr"></a>
			<a href="#"><img src="images/pint.gif" height="30" width="30" alt="Pint"></a>
		</div><!--Redes sociais-->
		
		</div>
		<!--Menu todo-->
		<div class="logo">
			 <img src="images/logodani.png" width="auto" height="auto">
		</div>
		<!--Logo-->

		<div class="linha"></div>
		<!--Linha de sepração-->

	</header>
	<!--Header-->

	<div id="content"> 
		<article class="post">
			<div class="category">
				<a href="#">Categoria do Post</a>
			</div>
			<!--Category-->
			<div class="agrupapost">
		 	<div class="ptitulo"><h1>Titulo do post</h1></div>
		 	<!--Titulo do post-->

		 	<div class="infoautor">
				Por:<span>Daniele</span> | <span class="cinzaclaro">@emilyoly</span> | <span class="cinzamedio">Data: 06/05/15</span>
				<hr />	
			</div>
			<!--Info autor-->

			<div class="contentpost">
				<div class="thumbpost">
					<img src="images/imgpostt.jpg" height="281" width="440" alt="">
				</div>
				<!--Tumb Post-->

				<div class="txpost">
					<p>Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-mente com o primeiro paragrafo do post.</p>
				</div>
				<!--TxPost-->

				<div class="leiamais">
					<a href="#">Continue Lendo &gt</a>
				</div>
				<!--Leia Mais-->	

			</div>
			<!--Content Post-->
			</div>
			<!--Agrupa Post-->

			
			<!--COMECO SEGUNDO POST-->
			<div class="category">
				<a href="#">Categoria do Post</a>
			</div>
			<!--Category-->
			<div class="agrupapost">
		 	<div class="ptitulo"><h1>Titulo do post</h1></div>
		 	<!--Titulo do post-->

		 	<div class="infoautor">
				Por:<span>Daniele</span> | <span class="cinzaclaro">@emilyoly</span> | <span class="cinzamedio">Data: 06/05/15</span>
				<hr />	
			</div>
			<!--Info autor-->

			<div class="contentpost">
				<div class="thumbpost">
					<img src="images/imgpostt.jpg" height="281" width="440" alt="">
				</div>
				<!--Tumb Post-->

				<div class="txpost">
					<p>Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automaticamente com o primeiro paragrafo do post. Coloque aqui um resumo sobre seu post, que seja bem objetivo, ou gere um automatica-mente com o primeiro paragrafo do post.</p>
				</div>
				<!--TxPost-->

				<div class="leiamais">
					<a href="#">Continue Lendo &gt</a>
				</div>
				<!--Leia Mais-->	

			</div>
			<!--Content Post-->
			</div>
			<!--Agrupa Post-->

		</article>
		<!--Article Post-->

		<aside class="sidebar">
			
		</aside>
		<!--Anside Sidebar-->
		
	</div>
	<!--Conteudo-->

	<footer id="footer">

		<p><small>© Copyright @emilyoly 2015. Todos os direitos reservados.</small></p>
			
	</footer>
	<!--Footer - Rodape-->

</div>
<!--Tudo/Wrapper-->
</body>
</html>

E o codigo CSS:


/*------- TUDO ------- # */
*{margin: 0; padding: 0; list-style: none;text-decoration: none;}

img, picture, video, embed {
  max-width: 100%;
}
body {background: #f5f0e7;font-family: Arial;}

/*---------------------HEADER-------------------*/
/* Topo */
#topo {width: 100%;height: auto;}

/* Menu */
.menu2{position: fixed; right: 0; top: 0; vertical-align: top;width: 100%;height: 33px;background: black;text-align: center;}
.menu ul {width: 100%;}
.menu ul li {display: inline;text-align: center;}
.menu ul li a {color: #fff;line-height: 33px;text-align: center;margin-right: 10px;}
.menu-top li a:hover{background: #393939;color: #fff;border-bottom: solid 4px #FF8C00;border-radius: 2px;text-shadow:1px 0px 1px #fff;}

/* Redes Sociais */
.social{float: right;margin-top: -33px;}
.social a:hover{}

/* Logo */
.logo {
max-width: 500px;max-height: 150px;margin:auto;margin-top: 50px;}
.logo img {background-size: cover;}

/* Linha que separa o topo do conteudo tem que arrumar o magin top*/
.linha {display:block;
	margin-top:15px; margin-left: 5%; margin-bottom: 25px;
	height:1px;width: 90%;background-color:black;box-shadow: #000 0 1px 5px;-webkit-box-shadow: #000 0 1px 5px;-moz-box-shadow: #000 0 1px 5px;}

/* Destaque da pagina inicial */
.destaque{width: 940px;height: 400px;overflow: hidden;margin-bottom: 50px;}
.destaque img {background-size: cover;width: 100%;}

/*--------------CONTEUDO PRINCIPAL--------------------*/
#content{width: 940px;margin: auto;}

/*---------------POST RECENTES----------------------*/
.dblog{width: 100%;}
.precentes{width: 540px;margin: auto;margin-top: 30px;padding-bottom: 30px;}
.rpost {
}
.img-post {width: 50px;height: 50px;float:left;padding-right: 20px;}
.postrecente{
}
.rtitulo{

}
.rautor{

}
.rdescricao{

}
/* Continue lendo */
.leiamais2{width: 100%;text-align: right;}
.leiamais2 a{color: #FF5B00; font: 16px;}
.leiamais2 a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}

/*---------------CLASSES-------------------------*/
.cinzaclaro{color: #B4B4B4 !important;}
.cinzamedio{color: #707070 !important;}
.laranja{color:#FF5B00;font: 16px;}
.italic{font-style: italic;}
.rightpost{float: right;}
.textcenter {text-align: center;}

/*---------------POST BLOG--------------------------*/
.post{width: 620px;float: left;}
.agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;}
/* Titulo do Post */
.ptitulo{margin-top: 25px;text-align: center;}
/* Informações do Post */
.infoautor{text-align: center;}
.infoautor hr{width: 500px;margin:auto;margin-top: 5px;}
/* Imagem do Post */
.thumbpost{margin-top: 15px;text-align: center;}
/* Descrição / Conteudo Post */
.txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;}
/* Continue Lendo */
.leiamais{margin-top: 10px;width: 100%;text-align: center;}
.leiamais a{color: #FF5B00; font: 20px;}
.leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}

/* Paginação */
#paginacao{
	width: 100%;
	font-style: italic;
	font-size: 18px;
	color: #888;
	margin-left: 20px;
}

.subir{
	width: 100%;
	margin-left: 20px;
}
.subir a{
	font-style: italic;
	font-size: 18px;
	color: #888;
}
/*Category*/
.category{position:relative;top: 15px;width: 150px;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}

/*--------------SIDEBAR--------------------*/
.sidebar{margin-top: 30px;width: 300px;height: 500px;background: gray;float: right;}

 /*---------------RODAPE-------------------*/
#footer{float: left;bottom:0;width:100%;height:100px;background: black;margin-top: 20px;} 
#footer p{text-align: center;line-height: 100px; /* Posiciona o texto no centro */}
#footer small{color:#fff;}

Claudio Junior 18 · Maio 10, 2015

Amigo, use a propriedade "z-index" do CSS para indicar para o navegador o que deve estar na frente.

Coloque essa propriedade no item que deve estar de frente:

z-index: 1;

Tente e veja se ajuda :clap:

emilyoly · Maio 10, 2015

Obrigado , funcionou certinho :3

Entrar

Arquivado

Conflito entre os position

Recommended Posts

emilyoly 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Junior 18 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

emilyoly 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fazer busca no Banco de dados usando vários critério

agregar dados em VBA excel

Sistema não funciona corretamente

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante