Position Fixed mixing margin

Asked

Viewed 735 times

0

When I set my header#header header as Fixed position, it took the style (for example the margin) of div.interface, I don’t understand why this happens, I want my div.interface to have margin-top:100px and my 0px header

@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 positioning margin

  • Mark if possible edit your question and also put HTML, without it you can’t simulate your problem to help you.

  • Using margin for position Fixed does not see much sense. If it is fixed, vc positions with top, left, bottom, right...

  • sam, my intention is to leave the title fixed, for it to accompany the scrolling, I did not put pq think q n has anything to do with the problem

  • Put a margin-top: 100px; and adjust this value until it is in the desired position.

  • There’s nothing there, when I put 100px the two will be far apart, the problem I mentioned above is this, I did not put margin in the title and he’s getting the margin of the interface

  • Man I made one EDIT in my answer explaining why the content is superimposed. It’s a simple explanation, but I think it will help you understand what happened

Show 1 more comment

1 answer

2


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

See the example how it looks

  @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 references of the place it occupies relative to its neighbors, being relative to page. So the content that comes under it goes up and gets superimposed. You can read the Mozilla documentation on the subject that will help you a lot I believe https://developer.mozilla.org/en-US/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.

Translation of Google:

"Do not leave space for the element. Instead, position it in a specified position relative to the screen viewport and do not move it when scrolled. When printing, position it in this fixed position on all pages. This value always creates a new stacking context."

Browser other questions tagged html css css3 positioning margin

You are not signed in. Login or sign up in order to post.