0

Quando eu defini meu header#cabecalho como position fixed, ele pegou o estilo(por exemplo o margin) da div.interface, eu não entendo pq isso acontece, quero que meu div.interface tenha margin-top:100px e meu header 0px

@charset "UTF-8";

.postagem {
	background-color: white;
	margin: 0px;
}
#interface {
	width: 1200px;
	background-color: white;
	margin: 10px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.2);
}
.cabecalho {
	position: fixed;
	width: 100%;
	height: 50px;
	background-color: green;
	padding: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}	
.logo {
	margin: 0px;
	color: white;
	font-family: arial;
	font-size: 30pt;
	text-align: center;
}
.artigo {
	margin: 0px 10px 0px 10px;
}

.titulo {
	font-family: arial;
	color: gray;
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}
.paragrafo {
	margin: 0px;
	padding: 0px;
	font-family: arial;
	text-align: justify;
	text-indent: 50px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../_css/estilo.css"/>
</head>
<body class="postagem">
		<header class="cabecalho">
			<h1 class="logo">TÍTULO DA PÁGINA<h1/>
		</header>
	<div id="interface">
		<article class="artigo">
			<h1 class="titulo">Filosofia Moderna</h1>
			<p class="paragrafo">
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			</p>
		<article>
	</div>
</body>
</html>

6
  • Marcos se possível edite sua pergunta e coloque também o HTML, sem ele não da para simular seu problema para poder te ajudar.
    – hugocsl
    10/09/2018 às 14:51
  • Usar margin para position fixed não vejo muito sentido. Se é fixo, vc posiciona com top, left, bottom, right...
    – Sam
    10/09/2018 às 15:14
  • sam, a minha intenção é deixar o título fixo, pra ele acompanhar a rolagem, não coloquei pq acho q n tem nada haver com o problema 10/09/2018 às 15:31
  • Coloque um margin-top: 100px; e ajuste esse valor até que fique na posição desejada.
    – Sam
    10/09/2018 às 15:33
  • Não tem nada haver, quando eu coloco 100px os dois vão ficar distantes, o problema que falei lá encima é esse, eu não coloquei margin no título e ele tá pegando a margin da interface 10/09/2018 às 15:46

1 Resposta 1

2

Existem formas diferentes para vc ter esse mesmo resultado. Mas eu preferi colocar um padding-top no body pouco maior que a altura da barra verde (o Bootstrap também faz dessa forma) e um coloquei um top:0 no .cabecalho

Veja o exemplo como fica

  @charset "UTF-8";

  body {
    padding-top: 60px; /* aqui vc define onde o conteúdo começa */
  }

.postagem {
	background-color: white;
	margin: 0px;
}
#interface {
	width: 1200px;
	background-color: white; 
	margin: 10px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.2);
}
.cabecalho {
	position: fixed;
  top: 0;
	width: 100%;
	height: 50px;
	background-color: green;
	padding: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
  padding-top: 10px;
}	
.logo {
	margin: 0px;
	color: white;
	font-family: arial;
	font-size: 30pt;
	text-align: center;
}
.artigo {
	margin: 0px 10px 0px 10px;
}

.titulo {
	font-family: arial;
	color: gray;
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}
.paragrafo {
	margin: 0px;
	padding: 0px;
	font-family: arial;
	text-align: justify;
	text-indent: 50px;
}
<body class="postagem">
		<header class="cabecalho">
			<h1 class="logo">TÍTULO DA PÁGINA</h1>
		</header>
	<div id="interface">
		<article class="artigo">
			<h1 class="titulo">Filosofia Moderna</h1>
			<p class="paragrafo">
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			Embora alguns autores considerem a Filosofia do Renascimento, nos séculos XV e XVI, como parte da Filosofia Moderna, em geral, aceita-se que o filósofo que iniciou a Filosofia Moderna tenha sido René Descartes, no século XVII, uma vez que seus trabalhos definiram e deram corpo ao escopo, objeto e métodos de tal período da filosofia. Da mesma forma, o trabalho de Ludwig Wittgenstein é considerado o término de tal período, iniciando o que é normalmente chamado de período pós-moderno. Este período não é caracterizado por uma escola ou doutrina especifica, mas por um estilo de trabalhar as questões filosóficas e por certas premissas ou hipóteses comuns.
			</p>
		<article>
	</div>

EDIT:

Explicação simples do problema com position:fixed: O que acontece é que quando vc coloca position:fixed em um elemento ele sai do "fluxo" do documento, e perde as referencia do lugar que ocupa relativo aos seus vizinhos, ficando relativo a página. Por isso o conteúdo que vem abaixo dele sobe e fica sobreposto. Vc pode ler a documentação da Mozilla sobre o assunto que vai te ajudar bastante acredito https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.

Tradução do Google:

"Não deixe espaço para o elemento. Em vez disso, posiciona-o em uma posição especificada em relação à viewport da tela e não o move quando rolada. Ao imprimir, posicione-o nessa posição fixa em todas as páginas. Esse valor sempre cria um novo contexto de empilhamento."

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 .