Make CSS divs overlap? - css

Question

There were many tutorials for this, but they weren't much a help for me.
When I scroll the page down, the content should go under the ´header´, not on top of it.
The footer works as it should.
http://jsfiddle.net/D4c4n/
body {
font-family:helvetica;
margin: auto;
min-height: 100%;
width: 100%;
background-image:url('nainen.jpg');
background-repeat: none;
}
.main {
min-height: 100%;
height:100%;
}
#background {
height: 100%;
width: 100%;
}
.ca-menu li:hover{
background:#fff;
}
.ca-menu li:hover .ca-icon{
color: #afa379;
font-size: 40px;
opacity: 0.1;
animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #afa379;
animation: moveFromRight 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
#keyframes moveFromLeft{
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
.fl {
top:150px;
width: 100%;
transition: all;
position: absolute;
}
.slidepart {
width:100%;
height:390px;
overflow:hidden;
position:relative;
border:#lightgray solid 2px;
box-shadow:gray 2px 5px 5px;
}
.slidepart img {
position:absolute;
width:100%;
height:450px;
border: black solid 1px;
}
.sl_paginationpart {
display:block;
background:#BFFF8D9;
width:100%;
height:1px;
position:absolute;
right:0px;
bottom:0px;
padding:6px;
border: solid 1px #FFE97D;
transition:all 0.5s ease
}
.sl_paginationpart:hover {
height:17px;
opacity: 0.8;
background:#908967;
}
ul.slpagination {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
right: 0px;
}
ul.slpagination:hover {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
}
ul.slpagination li {
margin:0px;
padding:0px;
list-style:none;
float:left;
height:100%
}
ul.slpagination li a {
text-decoration:none;
}
ul.slpagination li a.prev {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.next {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.number {
background:#FFE97D;
width:25px;
height:4px;
display:block;
text-align:center;
margin:0px 3px;
font-size:0px;
font-weight:bold;
color:#A3916D;
text-decoration:italic;
font-family: helvetica;
border-radius:3px 3px 3px 3px;
transition: all 0.5s ease;
}
ul.slpagination li a.number:hover {
background:#FFF8D9;
color:gray;
height:18px;
font-size:12px;
}
ul.slpagination li a.select {
background:#B78B59;
color:white;
text-decoration:none;
text-decoration:italic;
font-size:0px;
}
.sl_paginationpart:hover li a.select {
height: 18px;
font-size: 14px;
}
.sl_paginationpart:hover li a.number {
height: 18px;
}
#logo {
opacity: 1;
}
.kielet {
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
}
.kielet nav {
text-align: left;
height: 35px;
}
.kielet a {
display: inline;
left: 0px;
}
.icon {
width: 50px;
height: 101%;
right: 0px;
float: right;
margin:0 10px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}
.submit {
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #71f78c), color-stop(1, #5dde56) );
background:-moz-linear-gradient( center top, #71f78c 5%, #5dde56 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#71f78c', endColorstr='#5dde56');
background-color:#71f78c;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #93e084;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:16px;
font-weight:normal;
font-style:normal;
height:30px;
line-height:30px;
width:60px;
text-decoration:none;
right: 40%;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5dde56), color-stop(1, #71f78c) );
background:-moz-linear-gradient( center top, #5dde56 5%, #71f78c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5dde56', endColorstr='#71f78c');
background-color:#5dde56;
}
.submit:active {
position:relative;
top:1px;
}
.tiedot {
right: 100px;
top: 150px;
height: 250px;
position:absolute;
width: 250px;
border: dotted 1px;
text-align: center;
}
.lomake {
right: 35%;
top: 150px;
position:absolute;
}
.parent {
font-family: Verdana;
height: 30px;
font-size: 20px;
transition: background 0.5s ease;
}
.parent:hover {
background: #C2C3C4;
}
.parent a {
color: black;
text-decoration: none;
cursor: pointer;
}
.show ul
{
/*animation for show*/
transition:max-height 1s;
-webkit-transition:max-height 1s;
max-height: 100%;
}
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
background-color: #333333;
}
.navigointi ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.navigointi a
{
float:left;
width:6em;
top: 0px;
text-decoration:none;
color:white;
background: FFE97D;
padding:0.2em 0.6em;
border-right:1px solid white;
height:29px;
transition: all 0.5s ease;
}
.navigointi a:hover
{
color: #B0B0B0;
}
.navigointi li
{
display:inline;
}
#selected {
background-color:white;
color: #645406;
cursor: default;
}
form {
right: 50%;
}
.wrapper{
min-height: 100%;
height:100%;
margin: 0 0 -60px;
}
.push{
height:60px;
}
footer
{
background-color:#333333;
position:fixed;
height:20px;
bottom: 0px;
margin-bottom: 0px;
width:100%;
text-align: right;
}
header
{
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
position: fixed;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<script src="jquery-1.4.2.min.js"></script>
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style_v2.css" />
<title>Artotek</title>
<LINK REL="SHORTCUT ICON"
HREF="favicon.ico">
<body>
<div class="wrapper">
<!-- KIELET -->
<header>
<div class="navigointi">
<ul>
<li><a id="selected" onclick="return false" href="#">Etusivu</a></li>
<li>Tietoa meistä</li>
<li>Yhteystiedot</li>
</ul>
</div>
</header>
<div id="footer" style="bottom:0px; right:0px; width:100px; font-size:8px;">
</div>
<div class="main">
<div id="teksti" style="position:absolute; font-family:century gothic; width:100%; top: 40px; font-size: 20px; height:130px; margin-top:0px; text-align:center; ">
<br>
<h3>ARTOTEK</h3>
<hr>
<p>Olemme startup innovatiivisten tuotteiden kehitysyritys<br>
Kysyttävää? Ota yhteyttä!</p>
</div>
<div style="margin-top: 800px;">
<a name="section2">Section 2</a>
<p>blablalblalalalalalal</p>
<p>lddlwdlldwldldwdlwdl</p>
</div>
</div>
</div>
</div>
<!--Twitter
<div class="twitter" style="width:50px; top:0px; margin-top:0px;">
<a class="twitter-timeline" href="https://twitter.com/ArtotekTmi" data-widget-id="381408956653899776">#ArtotekTmi Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<img style="position:absolute; bottom:0px; right:0px;"src="nainen.gif"></img>-->
</div>
<div class="push"></div>
<footer>©Claudio Lintunen</footer>
</body>
</html>

Answer 1

You can change the z-index for this:
header
{
z-index: 1;
}
This way the header will go on top of the other elements which have a lower z-index (z-index is 0 by default).
jsFiddle

Answer 2

put z-index to header part
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
background-color: #333333;
z-index:99999;
}
jsfiddle:http://jsfiddle.net/D4c4n/3/

Answer 3

If you add z-index: 1; to your header rule it will work just fine.
header
{
top:0px;
width:100%;
background-color: #333333;
padding:0px;
height: 35px;
color: white;
position: fixed;
z-index: 1;
}
If z-index: 1 does'nt work try increase the z-index till it does.