2

Estoy creando unas imágenes escalables, pero cuando subo la página y posiciono el puntero el escalable sobrepasa el header y no quiero eso.

Les muestro el CSS q tengo, el HTML solo es un section, article e img, nada más; donde está el trabajo es en el CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open sans';
  background: #E8E8E8;
}

header {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0%;
  left: 0%;
  padding: 1%;
  background: #21618c;
  z-index: 100px;
}

header #button-menu {
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}

.navegacion {
  position: absolute;
  top: 100%;
  left: 0;
  width: 0%;
  height: 100vh;
  background: rgba(0, 0, 0, .0);
}

.navegacion ul {
  width: 320px;
  height: 100%;
  background: #fff;
  list-style: none;
  position: absolute;
  top: 0;
  left: -320px;
  transition: left .3s;
}

.navegacion .menu li.title-menu {
  padding: 20px;
  background: #5F6F81;
  color: #fff;
  text-align: center;
  font-size: 22px;
}

.navegacion .menu a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid #C6D0DA;
  font-size: 22px;
  font-weight: 200;
  text-decoration: none;
  color: #575D69;
}

.navegacion .menu a:hover {
  background: #798DA3;
  color: #fff;
}

.navegacion .menu li span.icon-menu {
  margin-right: 12px;
}

.navegacion .menu .item-submenu>a::after {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\f105';
  float: right;
  color: #C5C5C5;
}


/* Submenu ============*/

.navegacion .submenu li.title-menu {
  background: #fff;
  color: #575D69;
}

.navegacion .submenu li.go-back {
  padding: 10px 20px;
  background: #5F6F81;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.navegacion .submenu li.go-back::before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\f0d9';
  margin-right: 10px;
}

@media screen and (max-width: 320px) {
  .navegacion ul {
    width: 100%;
  }
}


/* ============================   Footer ===========================*/

footer {
  position: -webkit-sticky;
  position: absolute;
  width: 100%;
  margin-bottom: 0%;
  background: #21618c;
  padding: 15px;
  text-align: center;
  color: #fff;
}


/*		%%%%%%%%% 		Contenido 		%%%%%%%%% 		*/

#article img {
  margin-top: 3%;
  width: 11%;
  margin-bottom: 3%;
  height: auto;
  margin-left: 5%;
  cursor: pointer;
  -webkit-transition-duration: 0.5s;
  /* Safari */
  transition-duration: 0.5s;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#article img:hover {
  z-index: -1;
  transform: scale(3.2, 3.2);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}


/* 	%%%%%%%%%% 	menu lateral 	%%%%%%%%%% 	*/

#menu {
  display: block;
  width: 10%;
  height: 60vh;
  float: left;
  margin-top: 1%;
  margin-left: 5%;
  background: white;
  text-decoration: none;
}

#menu ul li a {
  display: block;
  text-align: center;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 100%;
  height: auto;
  text-decoration: none;
  font-size: 3vh;
  color: #fff;
}

#menu h2 {
  font-size: 3vh;
  display: block;
  margin-top: 20%;
  text-align: center;
}

#menu ul {
  list-style: none;
}

#menu ul li {
  display: block;
  border: none;
  width: 90%;
  background: #21618c;
  padding: 1%;
  border-radius: 5px;
  margin: 10% 5%;
  margin-bottom: 5%;
  color: black;
  margin-top: 10%;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

#menu ul li:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#menu ul #logolateral {
  display: block;
  margin-top: 2%;
  margin-left: 5%;
  width: 90%;
}

#buscar {
  display: inline-flex;
  margin-top: 7%;
  margin-left: 20%;
  border-radius: 5px;
  border: none;
  padding: 1%;
  outline: none;
  width: 75%;
  height: auto;
}
<meta charset="iso-8859-1"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">

<header>
  <span id="button-menu" class="fa fa-bars"></span>
  <nav class="navegacion">
    <ul class="menu">
      <!-- TITULAR -->
      <li class="title-menu">Bienvenido</li>
      <!-- TITULAR -->
      <li><a href="/index.html"><span class="fa fa-home icon-menu"></span>Inicio</a></li>
      <li class="item-submenu" menu="1">
        <a href="#"><span class="fa fa-folder icon-menu"></span>Unidad 1</a>
        <ul class="submenu">
          <li class="title-menu"><span class="fa fa-folder-open icon-menu"></span>Unidad 1</li>
          <li class="go-back">Atras</li>
          <li><a href="#">Plataformas Web</a></li>
          <li><a href="#">Estructura Web</a></li>
          <li><a href="#">Internet de las cosas</a></li>
          <li><a href="#">Servidores Web</a></li>
          <li><a href="#">Maquetacion</a></li>
        </ul>
      </li>
      <li class="item-submenu" menu="2">
        <a href="#"><span class="fa fa-folder icon-menu"></span>Unidad 2</a>
        <ul class="submenu">
          <li class="title-menu"><span class="fa fa-folder-open icon-menu"></span>Unidad 2</li>
          <li class="go-back">Atras</li>
          <li><a href="#">Contacto</a></li>
          <li><a href="#">Encuesta</a></li>
          <li><a href="#">PDF</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Registro</a></li>
        </ul>
      </li>
      <li class="item-submenu" menu='3'>
        <a href="#"><span class="fa fa-folder icon-menu"></span>Unidad 3</a>
        <ul class="submenu">
          <li class="title-menu"><span class="fa fa-folder-open icon-menu">Unidad 3</span></li>
          <li class="go-back">Atras</li>
          <li><a href="#">Paginas en construcion</a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </li>
      <li class="item-submenu" menu='4'>
        <a href="#"><span class="fa fa-folder icon-menu"></span>Unidad 4</a>
        <ul class="submenu">
          <li class="title-menu"><span class="fa fa-folder-open icon-menu">Unidad 4</span></li>
          <li class="go-back">Atras</li>
          <li><a href="#">Paginas en construcion</a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </li>
      <li class="item-submenu" menu='5'>
        <a href="#"><span class="fa fa-folder icon-menu"></span>Unidad 5</a>
        <ul class="submenu">
          <li class="title-menu"><span class="fa fa-folder-open icon-menu">Unidad 5</span></li>
          <li class="go-back">Atras</li>
          <li><a href="#">Paginas en construcion</a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </li>
      <li class="item-submenu" menu='6'>
        <a href="#"><span class="fa fa-shopping-bag icon-menu"></span>Tienda</a>
      </li>
    </ul>
  </nav>
</header>

<section id="section">
  <input id="buscar" type="text" placeholder="Buscar">
  <div id="menu">
    <ul>
      <img id="logolateral" src="img/logo.png" alt="">
      <li><a href="">Adidas</a></li>
      <li><a href="">Nike</a></li>
      <li><a href="">Puma</a></li>
    </ul>
  </div>
  <article id="article">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
    <img src="https://placehold.it/300x300" alt="" onclick="">
  </article>
</section>

<footer>
  <p>Derechos reservados </p>
</footer>

14
  • 1
    Incluye tu código html para poder reproducir el problema
    – user22721
    Commented el 24 mar. 2018 a las 17:17
  • 1
    listo ya lo agrege pero aun asi no lo ejecuta
    – Lovato
    Commented el 24 mar. 2018 a las 17:21
  • 2
    ¿Estas seguro de que ese es el CSS que estás utilizando? He copiado tu código y no parece que tenga el error que indicas: jsfiddle.net/s9q1s25L Commented el 24 mar. 2018 a las 19:31
  • ¿A qué te refieres con que sobrepasa el header? El código compartido no tiene ningún header, ¿podrías añadir el código necesario para reproducir el problema y añadir una mejor descripción del mismo?
    – Alvaro Montoro
    Commented el 26 mar. 2018 a las 19:57
  • 1
    Hola @Lovato, he exagerado la animación para que se vea el problema porque antes no se veía. Ahora ya se puede ver que la imagen queda por debajo del footer (aunque parece que se ve bien por encima del header). Si es sólo eso, se soluciona poniéndole z-index:-1; al `footer``
    – Alvaro Montoro
    Commented el 1 abr. 2018 a las 21:03

1 respuesta 1

1

el CSS del header tiene definido el z-index en pixeles. Ese índice (index) va sin unidades de medida, así:

z-index: 99999;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.