Div with position: relative overlays another with position: fixed

Navigation
1

I have a div "page menu" with fixed position and another below with position: relative; I want to put a text in it, but when under the page the relative mounts with the fixed when it should be behind, that I would continue to see the menu even if it goes down, what positioning do I have to put: relative? absolute? another? 

#menu{
position: fixed;
width: 1425px;
height: 100px;
background-color: #8F8177;
top: 0px;
left: 0px;
}
body{
    background-color: #BDBDBD;
}
#menu-botones{
position: fixed;
top: 15px;
left: 120px;
font-size:25px;
}
#menu-botones li{
display: inline;
}
img.logo{
width: 190;
height: 90;
position:fixed;
top: 5px;
left: 900px;
}
img.imagenprincipal{
width: 1351px;
height: 900px;
margin:-10px;
margin-top:92px;
}
a {
    color: #CBC5C0;
}
#segundo {
width: 1351px;
height: 500px;
background-color: white;
margin:-10px;
margin-top:0px;
}
#tercero{
background-color: #8F8177;
position:relative;
top:10px;
left:10px;
width: 251px;
height: 50px;   
}
#tercero h1{
margin:0px;
margin-top:0px;
}
#informacion{
background-color: #8F8177;
margin:280px;
margin-top:1030px;
width: 851px;
height: 250px;
}
#acceso{
background-color: #8F8177;
position:relative;
top: 1425px;
left: -10px;
width: 1351px;
height: 250px;
}
div{
display:inline-block:
}
<html>
<head>
<link REL="stylesheet" TYPE="text/css" href="style.css"></link>
<title>e&f Interiorismo</title>
</head>
<body>
<div id="menu">
<div id="menu-botones">
<ul class="modelo">
<li><a style="text-decoration: none;" href="index.php">¿Quienes Somos?</a></li>
<li><a style="text-decoration: none;" href="/proyectos/proyectos.php">Proyectos</a></li>
<li><a style="text-decoration: none;" href="#">Servicios</a></li>
<li><a style="text-decoration: none;" href="#">Productos</a></li>
<li><a style="text-decoration: none;" href="https://.es-es.facebook.com/E-F-Interiorismo-222489607867994/">Facebook</a></li>
<li><a style="text-decoration: none;" href="/contacto/contacto.php">Contacto</a></li>
</ul>
</div>
</div>
<IMG class="logo" SRC="/FOTOS/LOGO.jpg"></img>
<IMG class="imagenprincipal" SRC="/FOTOS/tienda.jpg"></img>
<div id="segundo">
<div id="tercero">
<h1>¿Quienes Somos?</h1>
</div>
<div id="informacion">
</div>
</div>
<div id="acceso">
</div>
</body>
</html>
    
asked by alberto 31.08.2017 в 15:49
source

2 answers

1

Try z-index .

  

The CSS property z-index indicates the z-order of an element and its descendants. When several elements overlap, z-order determines which ones cover others. An element with a higher z-index usually covers a smaller one.

In your case: 

#menu{
position: fixed;
width: 1425px;
height: 100px;
background-color: #8F8177;
top: 0px;
left: 0px;
z-index:2;
}
#acceso{
background-color: #8F8177;
position:relative;
top: 1425px;
left: -10px;
width: 1351px;
height: 250px;
z-index:1;
}


#menu{
position: fixed;
width: 1425px;
height: 100px;
background-color: #8F8177;
top: 0px;
left: 0px;
}
body{
    background-color: #BDBDBD;
}
#menu-botones{
position: fixed;
top: 15px;
left: 120px;
font-size:25px;
}
#menu-botones li{
display: inline;
}
img.logo{
width: 190;
height: 90;
position:fixed;
top: 5px;
left: 900px;
}
img.imagenprincipal{
width: 1351px;
height: 900px;
margin:-10px;
margin-top:92px;
}
a {
    color: #CBC5C0;
}
#segundo {
width: 1351px;
height: 500px;
background-color: white;
margin:-10px;
margin-top:0px;
}
#tercero{
background-color: #8F8177;
position:relative;
top:10px;
left:10px;
width: 251px;
height: 50px;   
}
#tercero h1{
margin:0px;
margin-top:0px;
}
#informacion{
background-color: #8F8177;
margin:280px;
margin-top:1030px;
width: 851px;
height: 250px;
}
#acceso{
background-color: #8F8177;
position:relative;
top: 1425px;
left: -10px;
width: 1351px;
height: 250px;
}
div{
display:inline-block:
}
<html>
<head>
<link REL="stylesheet" TYPE="text/css" href="style.css"></link>
<title>e&f Interiorismo</title>
</head>
<body>
<div id="menu">
<div id="menu-botones">
<ul class="modelo">
<li><a style="text-decoration: none;" href="index.php">¿Quienes Somos?</a></li>
<li><a style="text-decoration: none;" href="/proyectos/proyectos.php">Proyectos</a></li>
<li><a style="text-decoration: none;" href="#">Servicios</a></li>
<li><a style="text-decoration: none;" href="#">Productos</a></li>
<li><a style="text-decoration: none;" href="https://.es-es.facebook.com/E-F-Interiorismo-222489607867994/">Facebook</a></li>
<li><a style="text-decoration: none;" href="/contacto/contacto.php">Contacto</a></li>
</ul>
</div>
</div>
<IMG class="logo" SRC="/FOTOS/LOGO.jpg"></img>
<IMG class="imagenprincipal" SRC="/FOTOS/tienda.jpg"></img>
<div id="segundo">
<div id="tercero">
<h1>¿Quienes Somos?</h1>
</div>
<div id="informacion">
</div>
</div>
<div id="acceso">
</div>
</body>
</html>
    
answered by 31.08.2017 в 15:59
0

You have several options. One is to remove the relative positioning to establish the position of the div using the padding of the container div.

Another is to set a high z-index to the menu to make sure it is above the rest of the content.

Here is an example with the first option: 

#menu{
position: fixed;
width: 1425px;
height: 100px;
background-color: #8F8177;
top: 0px;
left: 0px;
}
body{
    background-color: #BDBDBD;
}
#menu-botones{
position: fixed;
top: 15px;
left: 120px;
font-size:25px;
}
#menu-botones li{
display: inline;
}
img.logo{
width: 190;
height: 90;
position:fixed;
top: 5px;
left: 900px;
}
img.imagenprincipal{
width: 1351px;
height: 900px;
margin:-10px;
margin-top:92px;
}
a {
    color: #CBC5C0;
}
#segundo {
width: 1351px;
height: 500px;
background-color: white;
margin:-10px;
margin-top:0px;
padding: 10px 0 0 10px;
}
#tercero{
background-color: #8F8177;
width: 251px;
height: 50px;   
}
#tercero h1{
margin:0px;
margin-top:0px;
}
#informacion{
background-color: #8F8177;
margin:280px;
margin-top:1030px;
width: 851px;
height: 250px;
}
#acceso{
background-color: #8F8177;
position:relative;
top: 1425px;
left: -10px;
width: 1351px;
height: 250px;
}
div{
display:inline-block:
}
<html>
<head>
<link REL="stylesheet" TYPE="text/css" href="style.css"></link>
<title>e&f Interiorismo</title>
</head>
<body>
<div id="menu">
<div id="menu-botones">
<ul class="modelo">
<li><a style="text-decoration: none;" href="index.php">¿Quienes Somos?</a></li>
<li><a style="text-decoration: none;" href="/proyectos/proyectos.php">Proyectos</a></li>
<li><a style="text-decoration: none;" href="#">Servicios</a></li>
<li><a style="text-decoration: none;" href="#">Productos</a></li>
<li><a style="text-decoration: none;" href="https://.es-es.facebook.com/E-F-Interiorismo-222489607867994/">Facebook</a></li>
<li><a style="text-decoration: none;" href="/contacto/contacto.php">Contacto</a></li>
</ul>
</div>
</div>
<IMG class="logo" SRC="/FOTOS/LOGO.jpg"></img>
<IMG class="imagenprincipal" SRC="/FOTOS/tienda.jpg"></img>
<div id="segundo">
<div id="tercero">
<h1>¿Quienes Somos?</h1>
</div>
<div id="informacion">
</div>
</div>
<div id="acceso">
</div>
</body>
</html>
    
answered by 31.08.2017 в 16:02
Error when making a query with PDO Error connecting to the BDD through a class