Position fixed mixing margin

Question

Position fixed mixing margin

Navigation

#1 by (2 votes)

0

When I set my header # header as position fixed, it took the style (for example the margin) of the div.interface, I do not understand why this happens, I want my div.interface to have margin-top: 100px and mine 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>

html css css3 margin posicionamento

asked by anonymous 10.09.2018 / 16:46

1 answer

Kanade Optical Flow Algorithm Lucas Tomasi (KLT) in Python [closed] Execute a validation inserted in a string

score 2 · Accepted Answer

There are different ways for you to have this same result. But I preferred to put a padding-top in body slightly larger than the height of the green ( Bootstrap also does this ) and I put a top:0 into .cabecalho

See the example as follows

  @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:

Simple explanation of the problem with position:fixed : What happens is that when you put position:fixed in an element it leaves the "flow" of the document, and loses the reference of the place that it occupies relative to its neighbors, being relative the page. So the content that comes down from it goes up and overlaps. You can read the Mozilla documentation on the subject that will help you a lot I believe link

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

Translation by Google:

"Do not leave space for the element, instead position it in a specified position relative to the viewport of the screen and do not move it when scrolled. This value always creates a new stacking context. "