Publicado em 24 de nov.

Colocar elemento no topo da página

Porque mesmo com a marcação e estilos abaixo e não consigo colocar o elemento <p> no topo da página??? Somente definindo no arquivo de estilo, "top: -17px;" é que consigo. Poderiam me explicar?

<!DOCTYPE html>

<html>

<head>
	<title>Página Exemplo</title>
	<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen">
	<meta charset="UTF-8">
</head>

<body>
	<div id="teste">
 <p>teste</p>
	</div>
</body>

</html>

body {

	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: orange;
}

#teste {
	background-color: green;
}

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

E.Martins· 24 de nov.

Usar CSS Tools: Reset CSS, que vai da certo uso esse sempre!

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {

	display: block;
}

body {

	line-height: 1;
}

ol, ul {

	list-style: none;
}

blockquote, q {

	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {

	content: '';
	content: none;
}

table {

	border-collapse: collapse;
	border-spacing: 0;
}

	Copie e cole isso no inicio do seu CSS.

Pita· 27 de nov.

Para colocar no topo, além de mudar o top, precisa mudar a position dele também para "absolute"

Olha um exemplo

https://jsfiddle.net/t7m14ka6/

Maujor· 28 de nov.

Você precisa zerar a margem superior do elemento P.

Basta declarar:

#teste p { margin-top: 0; }

Por que? Procure no Google por "collapsing margins"

Maujor· 28 de nov.

Em 24/11/2017 at 18:07, E.Martins disse:

Usar CSS Tools: Reset CSS, que vai da certo uso esse sempre!

O CSS Reset que você está usando é de 2011 e zera as margens de todos os elementos HTML, além de outras declarações que não mais se usa. Usando esse Reset você precisa definir margens em regras css para cada elemento.

A versão moderna de CSS Reset está em: https://necolas.github.io/normalize.css/

Usar sempre? Não mesmo, isso depende de cada projeto.

Maujor· 28 de nov.

Em 27/11/2017 at 11:11, Pita disse:

Olha um exemplo

https://jsfiddle.net/t7m14ka6/

Esse exemplo nada tem a ver com o código postado pelo @zetabyte00 que fez a pergunta inicial.

Quando apontar solução usando uma ferramenta online, use o código que deu origem à dúvida e mostre a solução.