¿Por qué el “body” se muestra detrás del “header”?
Porque así debe ser, es el comportamiento normal, el body es el contenedor de principal de todos los elementos html
, por lo general es la base de todos los elementos que vengan después (internamente) como base es una razón muy obvia porque siempre va estar "detrás".
Ahora como no colocaste más información y estoy suponiendo, me imagino que te refieres a que el contenido que pusiste despues del header, el: main-container
, no se ve. Esto sucede porque navbar
le pones posición absoluta y lo posicionas en las coordenadas: Top: 0; y Left: 0;
, al ser un elemento con posición absoluta, no genera desplazamiento de contenido sino que puede sobreponerse sobre otros elementos, entonces, no es que no se vea el contenido es que los estás tapando con el header, otra característica de esta posición es que su prioridad de capa es más alta que los elementos no posicionados, entonces esto lo podrías evitar, otorgandole al siguiente elemento un position:relative
y un desplazamiento más arriba que el header con manipulando el eje z: z-index: 2
. Otra cosa es que no se, cual es tu intención de darle una posición absoluta al navbar, puedes cambiar su position
a relative
y verás cómo también hay desplazamiento del contenido.
body {
font-size: 15px;
font-family: sans-serif;
background-color: white;
/*background-image: url(/image/background_image.jpg);
background-repeat: no-repeat;*/
color: white;
}
html {
-webkit-margin: 0;
}
/*HEADER*/
#header-nav {
background-color: black;
position: relative;
left: 0;
right: 0;
top: 0;
-webkit-margin: 0;
}
.d-inline-block {
display: inline-block !important;
margin-top: 5px;
margin-bottom: 5px;
}
.align-top {
vertical-align: top !important;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
font-size: 1.25rem;
}
p {
line-height: 0.5px;
margin-left: 4px;
}
h1 {
margin-bottom: 0;
margin-top: 15px;
}
/*HEADER*/
/*MENU*/
ul {
position: relative;
color: black;
list-style: none;
padding-top: 35px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 10px;
margin-left: 100px;
}
ul li {
background-color: black;
float: right;
text-align: center;
line-height: 40px;
width: 200px;
}
ul li a:hover {
background-color: #2E2E2E;
}
ul li a {
display: block;
text-decoration: none;
color: white;
}
ul li ul {
margin: 0px;
padding: 0px;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.container {
width: 100%;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
h2 {
color: red;
}
#main-content {
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Alice' rel='stylesheet'>
<title>Transervice ADG</title>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-brand" id="header-nav">
<a>
<img src="css/image/logo_prueba.png" width="100" height="100" class="d-inline-block align-top" alt="">
<div class="d-inline-block align-top ">
<h1>Transervice ADG</h1>
<p>Genios en servicio</p>
</div>
</a>
<div class="d-inline-block align-top">
<ul>
<li><a href="#">Contactenos</a></li>
<li><a href="#">Quienes Somos</a>
<div>
<ul>
<li><a href="#">Mision</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Nosotros</a></li>
</ul>
</div>
</li>
<li><a href="#">Divisiones</a>
<ul>
<li><a href="#">Lubricantes</a></li>
<li><a href="#">Industriales</a></li>
<li><a href="#">OutSourcing</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<h2>Probando</h2>
</div>
</body>
</html>
Ahora si el problema es que aún quieres que por alguna razón el navbar tenga position: absolute
(aunque lo normal es un position: fixed
) y que haya un desplazamiento del contenido del body, para que no este tapado por el header es darle un alto al header
, supongamos "50px" y aplicarle al body
o al main-container
un margen interno de también: "50px".
Puedes jugar con esta medida hasta que encuentres el mejor resultado, yo me puse a jugar con tu código y en móviles el header ocupa casi unos 300px (como consejo los elementos navbar "flotantes" o con "posición fija" en móviles no deberían ocupar más de 100px, a menos que cambies esta altura mediante javascript cuando detecte scroll) y con eso ya se ve el contenido.
body {
font-size: 15px;
font-family: sans-serif;
background-color: white;
/*background-image: url(/image/background_image.jpg);
background-repeat: no-repeat;*/
color: white;
}
html {
-webkit-margin: 0;
}
/*HEADER*/
#header-nav {
background-color: black;
position: absolute;
left: 0;
right: 0;
top: 0;
-webkit-margin: 0;
}
.d-inline-block {
display: inline-block !important;
margin-top: 5px;
margin-bottom: 5px;
}
.align-top {
vertical-align: top !important;
}
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
font-size: 1.25rem;
}
p {
line-height: 0.5px;
margin-left: 4px;
}
h1 {
margin-bottom: 0;
margin-top: 15px;
}
/*HEADER*/
/*MENU*/
ul {
position: relative;
color: black;
list-style: none;
padding-top: 35px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 10px;
margin-left: 100px;
}
ul li {
background-color: black;
float: right;
text-align: center;
line-height: 40px;
width: 200px;
}
ul li a:hover {
background-color: #2E2E2E;
}
ul li a {
display: block;
text-decoration: none;
color: white;
}
ul li ul {
margin: 0px;
padding: 0px;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.container {
width: 100%;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
h2 {
color: red;
}
#main-content {
padding-top: 250px;
}
@media (min-width: 720px){
#main-content {
padding-top: 200px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Alice' rel='stylesheet'>
<title>Transervice ADG</title>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-brand" id="header-nav">
<a>
<img src="css/image/logo_prueba.png" width="100" height="100" class="d-inline-block align-top" alt="">
<div class="d-inline-block align-top ">
<h1>Transervice ADG</h1>
<p>Genios en servicio</p>
</div>
</a>
<div class="d-inline-block align-top">
<ul>
<li><a href="#">Contactenos</a></li>
<li><a href="#">Quienes Somos</a>
<div>
<ul>
<li><a href="#">Mision</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Nosotros</a></li>
</ul>
</div>
</li>
<li><a href="#">Divisiones</a>
<ul>
<li><a href="#">Lubricantes</a></li>
<li><a href="#">Industriales</a></li>
<li><a href="#">OutSourcing</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<h2>Probando</h2>
</div>
</body>
</html>
¿Era eso lo que querías lograr? Si tienes más dudas dejame un comentario y si esto te aclaro, agradecería un voto positivo a mi respuesta. Éxitos!