Problemas con position absolute y z-index css3

Question

Tengo una barra lateral de busqueda, pero dicha barra siempre esta debajo de los demas elementos de la web debido al position absolute, necesito que la barra este por encima de todos los elementos de la web

*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.clear{
  clear: both;
}
body{
  font-family: 'Open Sans', arial;
}
/* estilos para centrar la web */

.desenfoque{
  filter: brightness(75%);
  position: absolute;
  height: 100%;
  width: 100%;
}
body header{
  font-family: Open Sans;
  background: #fff;
  box-shadow: 0px 0px 5px 4px rgba(155, 155, 155, .2);
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
body header .contenedor{
  max-width: 1000px;
    margin: 0 auto;
    display: block;
}
header .logo{
  display: flex;
  justify-content: flex-end;
}
header .logo h3{
  color: #242424;
  text-align: center;
  font-size: 40px;
  font-family: 'Oswald', arial;
  text-transform: uppercase;
}
header .menu{
  position: absolute;
  top: 12px;
  display: flex;
  align-content: flex-end;
}
header .menu i{
  color: #242424;
  cursor: pointer;
}
/*animacion css*/
header .navegacion{
  margin: 0 auto;
  display: block;
  max-width: 1300px;
}
header #navegacion_hijo{
  display: none;
}
header .navegacion_hijo{
  position: absolute;
  background: #fff;
  padding: 40px;
  animation: fade .5s normal;
  -webkit-animation: fade .5s normal;
  -moz-animation: fade .5s normal;
  -o-animation: fade .5s normal;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
@keyframes fade {
  0%{
    opacity: 0;
    transform: translate(-600px);
    -webkit-transform: translate(-600px);
    -moz-transform: translate(-600px);
    -o-transform: translate(-600px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
  }
}
@-moz-keyframes fade {
  0%{
    opacity: 0;
    transform: translate(-600px);
    -webkit-transform: translate(-600px);
    -moz-transform: translate(-600px);
    -o-transform: translate(-600px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
  }
}
@-webkit-keyframes fade {
  0%{
    opacity: 0;
    transform: translate(-600px);
    -webkit-transform: translate(-600px);
    -moz-transform: translate(-600px);
    -o-transform: translate(-600px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
  }
}
@-o-keyframes fade {
  0%{
    opacity: 0;
    transform: translate(-600px);
    -webkit-transform: translate(-600px);
    -moz-transform: translate(-600px);
    -o-transform: translate(-600px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
  }
}
#navegacion_hijo ul li{
  list-style: none;
  padding-top: 40px;
  margin-top: 40px;
  line-height: 70px;
  text-align: center;
  max-width: 200px;
}
#navegacion_hijo ul li h3:hover, #navegacion_hijo ul li h3 #iconos:hover{
  color: #2D9CDB;
  transition-duration: .3s;
}
#navegacion_hijo ul li h3:not(:hover), #navegacion_hijo ul li h3 #iconos:not(:hover){
  transition-duration: .3s;
}
#navegacion_hijo ul li a:hover, #navegacion_hijo ul li a #iconos:hover{
  color: #2D9CDB;
  transition-duration: .3s;
}
#navegacion_hijo ul li a:not(:hover), #navegacion_hijo ul li a #iconos:not(:hover){
  transition-duration: .3s;
}
#navegacion_hijo ul li h3{
  text-decoration: none;
  color: #282828;
  font-size: 25px;
  cursor: pointer;
}
#navegacion_hijo ul li a{
  text-decoration: none;
  color: #282828;
  font-size: 25px;
  font-weight: bold;
}
#navegacion_hijo ul li p{
  line-height: 27px;
  color: #282828;
  font-size: 15px;
  max-width: 300px;
  text-align: center;
  margin-top: 20px;
}
#navegacion_hijo ul li h3 #iconos{
  position: relative;
  display: flex;
  justify-content: center;
}
#navegacion_hijo ul li a #iconos{
  position: relative;
  display: flex;
  justify-content: center;
}
header #navegacion_hijo ul li form input[type="text"]{
  padding: 0.75em;
  font-size: 16px;
  width: 100%;
  border: 0.5px solid rgba(0, 0, 0, .3);
  border-radius: 4%;
}
header #navegacion_hijo ul li form input[type="text"]:focus{
  border: 1px solid #2D9CDB;
}
#navegacion_hijo ul li .buscar i{
  position: absolute;
  left: 90%;
  top: 15.5%;
}

HTML

<div id="bg"></div>
    <header>
    <div class="contenedor">
        <div class="menu"><i class="fas fa-bars fa-2x" onclick="menu()"></i></div>
            <div class="logo">
                <h3>Guardian</h3>
            </div>
        </div>              
        <nav class="navegacion" id="navegacion">
            <div id="navegacion_hijo">
            <ul>
                <li>
                    <div class="buscar">
                    <form action="<?php echo RUTA.'/'.$bd_paginacion['carpeta_post']; ?>/busqueda.php" autocomplete="off" method="get">
                        <input type="text" placeholder="Buscar" name="buscar">
                        <input type="hidden" name="pagina">
                    </form>
                    <i class="fas fa-search fa-lg"></i>
                    </div>
                </li>
                <?php if(isset($_SESSION['admin'])): ?>
                <li>
                    <a href="#"><i class="fas fa-home fa-lg" id="iconos"></i>junex10</a>
                    <p>Bienvenido, iniciaste sesion como Administrador</p>
                </li>
                <?php elseif(isset($_SESSION['usuario'])): ?>
                <li>
                    <a href="#"><i class="fas fa-home fa-lg" id="iconos"></i>junex10</a>
                    <p>Bienvenido, <?php echo $_SESSION['usuario']; ?></p>
                </li>
                <?php elseif(!isset($_SESSION)): ?>
                <li>
                    <h3 onclick="login()"><i class="fas fa-home fa-lg" id="iconos"></i>Iniciar sesion</h3>
                    <p>¿Tienes cuenta? Inicia sesión para acceder a tu panel!</p>
                </li>
                <!--<li>
                    <a href="#"><i class="fas fa-user fa-lg" id="iconos"></i>Registrarse</a>
                    <p>¿No tienes cuenta? Registrate para publicar tus propios articulos!</p>
                </li>-->
            <?php endif; ?>
                <li>
                    <a href="#"><i class="fas fa-folder-open fa-lg" id="iconos"></i>Guias</a>
                    <p>Desarrollo web back y front end</p>
                </li>
                <li>
                    <h3 onclick="contacto()"><i class="fas fa-user fa-lg" id="iconos"></i>Contacto</h3>
                    <p>¿Tienes alguna duda?</p>
                </li>               
            </ul>
        </div>
        </nav>
    </header>
    <script type="text/javascript" src="<?php echo RUTA ?>/templates/js/barra_navegacion.js"></script>

CSS en donde esta ubicado la barra

body{
overflow-x: hidden;
}
 .contenedor_busqueda article{
    max-width: 1000px;
    margin: 0 auto;
    display: block;
    background: #f9f9f9;
    position: relative;
    top: 100px;
    padding: 2em;
    box-shadow: 0.5px 0.5px 0.5px 1px rgba(24, 24, 24, .4);
}
.mensaje_resultado h2{
    font-weight: 400;
    font-size: 24px;
}
.post_encontrado img{
    height: 350px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
.post_encontrado h2{
    padding-top: 0.5em;
}
.post_encontrado p{
    font-size: 15px;
}
.post_encontrado form input[type="submit"]{
    font-size: 15px;
    padding: 0.5em;
    margin-top: 10px;
    background: #2D9CDB;
    color: #f9f9f9;
    border: 1px solid #2D9CDB;
    cursor: pointer;
    border-radius: 4%;
    box-shadow: 0 3px 0 0px #196AA9;
}
.post_encontrado form input[type="submit"]:hover{
    background: #196AA9;
    border: 1px solid #196AA9;
    box-shadow: inherit;
    transition-duration: .5s;
}
.post_encontrado form input[type="submit"]:not(:hover){
    transition-duration: .5s;
}
@media screen and (max-width: 768px){
 .contenedor_busqueda article{
    max-width: 600px;
    box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(24, 24, 24, .4);
 }  
.mensaje_resultado h2{
    font-size: 20px;
}
.post_encontrado img{
    height: 250px;
}
}
@media screen and (max-width: 480px){
    .contenedor_busqueda article{
        max-width: 400px;
    }
    .mensaje_Resultado h2{
        font-size: 16px;
    }
    .post_encontrado img{
        height: 150px;
    }
}

HTML de la pagina en donde esta ubicado la barra

<?php require_once "../pg/busqueda.pg.php"; ?>
<?php require_once "../pg/paginacion_general.pg.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <?php require_once "../header/header.php"; ?>
    <link rel="stylesheet" href="<?php echo RUTA; ?>/templates/css/busqueda.css">
    <title>Ver resultado de la busqueda: <?php echo $obtener_dato_get; ?></title>
</head>
<body>
    <?php require_once "../header/barra.php"; ?>
    <div class="contenedor_busqueda">
<article>
        <div class="mensaje_resultado">
            <?php if($error == true): ?>
                <h2>El articulo que intenta buscar no existe: <strong><?php echo $obtener_dato_get; ?></strong></h2>
            <?php elseif($error == false): ?>
                <h2>Se ha encontrado coincidencias!: <strong><?php echo $obtener_dato_get; ?></strong></h2>
            <?php endif; ?>
        </div>
        <!--Coincidencias encontradas-->
<?php if($error == false): ?>
        <?php foreach($limitar_art as $datos): ?>
            <?php

                $id = $datos['id'];
                $id = filtrar_datos_string($id);
                $id = post_id($conexion, $id);
            ?>
        <div class="post_encontrado">

            <h2><?php echo htmlspecialchars($datos['titulo']); ?></h2>
            <img src="<?php echo RUTA.'/'.$bd_paginacion['carpeta_post'].'/'.htmlspecialchars($datos['thumb']); ?>" alt="<?php echo htmlspecialchars($datos['titulo']); ?>">

            <p><?php echo htmlspecialchars($datos['extracto']); ?></p>

            <form action="<?php echo RUTA.'/'.$bd_paginacion['carpeta_post']; ?>/single.php" method="get" autocomplete="off">
                <input type="hidden" name="idpost" value="<?php echo htmlspecialchars($id); ?>">
                <input type="submit" value="Continuar leyendo" title="Articulo completo">
            </form>
        </div>
    <?php endforeach; ?>
</article>
</div>
<?php endif; ?>

        <?php require_once "../header/paginacion.php"; ?>
        <?php require_once "../footer/footer.php"; ?>
</body>
</html>

Como es mucho codigo dejare una imagen de como se esta viendo

prueba con 'position:fixed' mas info en: https://es.stackoverflow.com/a/37931/81450 — alo Malbarez, Jun 16 '18 at 16:41
Justamente lo acabo de resolver, ya dejaré la solucion. Vaya es curioso, siempre que posteo alguna pregunta aca siempre me respondo a mi mismo xdd — JOSE HERRADA, Jun 16 '18 at 17:36

score 0 · Answer 1 · answered Jun 16 '18 at 17:41

Simplemente tenia que poner un z-index en el header, para que este por encima de cualquier elemento de la pagina.

font-family: Open Sans;


background: #fff;
  box-shadow: 0px 0px 5px 4px rgba(155, 155, 155, .2);
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  z-index: 3;

Problemas con position absolute y z-index css3

1 Answers1