We would like to know how to create Fixed Layer at left bottom page corner.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {<!--from w w w . ja v a 2 s.c o m-->
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
margin: 0
}
#flyover {
background-color: pink;
color: white;
position: fixed;
top: 87.5%;
z-index: 4;
border-radius: 0 50% 50% 0;
padding: 30px 30px 30px 40px;
left: -30px;
}
#footer {
background: green;
position: relative;
height: 100px;
width: 100%;
bottom: 0;
z-index: 1;
text-align: center;
}
.content {
height: auto;
background: lightblue;
width: 300px;
margin: 0 auto;
text-align: center
}
</style>
</head>
<body>
<div id="wrapper">
<div id="flyover">hi</div>
<div class="content">
Body of page content
<div style="padding: 800px 0">More Content</div>
</div>
<div ID="footer">FOOTER CONTENT</div>
</div>
</body>
</html>
The code above is rendered as follows: