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>
footer
(aunque parece que se ve bien por encima delheader
). Si es sólo eso, se soluciona poniéndolez-index:-1;
al `footer``