Skip to content

Instantly share code, notes, and snippets.

@felipelavinz
Last active December 24, 2015 18:08
Show Gist options
  • Save felipelavinz/6840370 to your computer and use it in GitHub Desktop.
Save felipelavinz/6840370 to your computer and use it in GitHub Desktop.
z-index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Z-Index</title>
<style>
body{
font-family: sans-serif;
}
figure, img{
position: relative;
}
img{
z-index: 10;
}
figcaption{
padding: 20px;
position: absolute;
z-index: 20;
bottom: 40px;
left: 0;
background: rgba( 255, 255, 255, 0.5 );
}
</style>
</head>
<body>
<figure>
<figcaption>Descripción de la foto</figcaption>
<img src="http://lorempixel.com/600/400" alt="imagen">
</figure>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment