css - 让 CSS div 重叠？

Question

这方面有很多教程，但对我帮助不大。当我向下滚动页面时，内容应该在“标题”下面，而不是在它上面。页脚正常工作。 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><a href="#section2">Tietoa meistä</a></li>
<li><a href="yhteys.html">Yhteystiedot</a></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&#228;v&#228;&#228;? <a href="yhteys.html" style="color:blue; text-decoration:underline;" title="Ota yhteyttä">Ota yhteytt&#228;</a>!</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>&#169;Claudio Lintunen</footer>
</body>
</html>

Answer 1

您可以为此更改 z-index:

header
{
    z-index: 1;
}

这样，标题将位于其他具有较低 z-index 的元素之上(默认情况下 z-index 为 0)。

jsFiddle