Problems with position absolute and z-index css3

Question

Problems with position absolute and z-index css3

Navigation

#1 by (0 votes)

0

I have a search sidebar, but this bar is always below the other elements of the web due to position absolute, I need the bar to be above all the elements of the 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 where the bar is located

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 of the page where the bar is located

<?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>

As it is a lot of code I will leave an image of how you are seeing

css3

asked by JOSE HERRADA 16.06.2018 в 18:29

source

1 answer

Problems with pdf when printing different records of a table Firebase database delete item array

score 0 · Answer 1

I just had to put a z-index in the header, so that it is above any element on the page.

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;