Question

我的主页上有一个幻灯片，当向下滚动时应该在固定标题后面，但事实并非如此。

但它确实在网站的所有其他页面上。

这是HTML

   <body>

   <div id="wrapperfull">

   <div id="head">

   <div id="header">
   <a href="index.html"><img src="../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a>
   </div><!-- end header div -->

   <div class="navigation">

       <div class="menu-holder">

           <ul class="menu">

        <li><a href="index.html">HOME</a></li>

        <li><a href='print.html'>WORK</a>
      </li>

        <li><a href="photography.html">PHOTOGRAPHY</a>
      </li>

        <li><a href="blog.html">BLOG</a>
      </li>

        <li><a href="inspired.html">INSPIRED</a>
      </li>

           </ul>
       </div>
       <!-- menu-holder end -->
   </div><!-- end navigation div -->     


</div>

        <div class="container">

       <!-- START: slideshow -->

       <ul class="slideshow">
         <li class="" style="opacity: 0.7021717977643726;"> <img src="../Images/P7158711.jpg" alt="Treetopnews" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
         <li class="show" style="opacity: 0.2971101211669;"> <img src="../Images/NCSY/NCSY4.jpg" alt="NCSYbooklet" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
    <li class="" style="opacity: 0;"> <img src="../Images/Aish/AHC3.jpg" alt="Aishcalendar" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
            <li class="" style="opacity: 0;"> <img src="../Images/P7168759.jpg" alt="Grahamallcott" height="500" width="700" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;"> </li>
       </ul>
   </div>

    <!-- END: slideshow -->

<div class="blog-container">

           <p2>
      <p>I'm Just Joel, a 33 year old graphic and web designer from hertfordshire. I have over nine years of commercial experience and have developed a wide range of skills within branding, marketing, editorial design, web design & corporate literature. I have strong passion for design and am always looking for new things to create, being inspired by all things around me.</p>
      <p><br />

        Come inside and see what I've done and what I can do for you. 


        Remember...It's Just Joel.</p>
      <p>&nbsp;</p>



        <p>I'm Just Joel, a 33 year old graphic and web designer from hertfordshire. I have over nine years of commercial experience and have developed a wide range of skills within branding, marketing, editorial design, web design & corporate literature. I have strong passion for design and am always looking for new things to create, being inspired by all things around me. 


        Come inside and see what I've done and what I can do for you. 


        Remember...It's Just Joel.</p>
      <p>&nbsp;</p>
           </p2>

       <br />
      <p2>For further information or to request a quote, <br />
        feel free to contact me</p2>
      <p>&nbsp;</p>
           </p2>

      <p2>

      </p2>


         <p>&nbsp;</p>

         <p2></a></p2>

           <p>&nbsp;</p>

           <div id="social">

      <a href="https://twitter.com/JustJoel_" target="_blank"><img src="http://i1286.photobucket.com/albums/a604/JustJoel_/TwitterIcon_zps46695054.png" width="25" height="25" border="0" alt=" photo TwitterIcon_zps46695054.png"/></a>

      <a href="http://www.linkedin.com/profile/view?id=119632044&goback=%2Enmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&trk=spm_pic" target="_blank"><img src="http://i1286.photobucket.com/albums/a604/JustJoel_/LinkedinIcon_zps908ab8ff.png" width="25" height="25" border="0" alt=" photo LinkedinIcon_zps908ab8ff.png"/></a>

      <a href="http://www.pinterest.com/justjoel80/boards/" target="_blank"><img src="http://i1286.photobucket.com/albums/a604/JustJoel_/PinterestIcon_zps02da9304.png" width="25" height="25" border="0" alt=" photo PinterestIcon_zps02da9304.png"/></a>

      <a href="http://instagram.com/mole80" target="_blank"><img src="http://i1286.photobucket.com/albums/a604/JustJoel_/InstagramIcon_zps904c0f1f.png" width="25" height="25" border="0" alt=" photo InstagramIcon_zps904c0f1f.png"/></a>

    <a href="https://plus.google.com/107489686537237947777/posts" target="_blank"><img src="http://i1286.photobucket.com/albums/a604/JustJoel_/GooglePlusIcon_zps7a278366.png" width="25" height="25" border="0" alt=" photo GooglePlusIcon_zps7a278366.png"/></a></div>

   </div>


   </div>



   </body>

这是CSS

    #wrapperfull {
min-height: 100%;
width: 1050px;
border: none;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin-right: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
    }

    #head {
height: 100px;
width: 1050px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
    }

    #header {
height: 135px;
width: 1045px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 10px;
    }

    #footer {
position: absolute;
width: 1050px;
height: 85px;
bottom: 0;
padding: 0px;
margin-bottom: 150px;
    }

    .footer-style {
padding: 40px;
    }

    h1 {
font-family: "geogtq md";
color: #00BDE5;
font-size: 40px;
text-decoration: none;
margin-top: 35px;
    }

    h1:hover {
color: #007889;
font-size: 40px;
    }

    h2 {
font-family: Helvetica, sans-serif;
color: #00BDE5;
font-size: 25px;
text-decoration: none;
    }

    h2:hover {
color: #007889;
font-size: 25px;
    }

    p {
font-family: "geogtq rg", Helvetica;
color: #01778B;
font-size: 12px;
text-align: justify;
    }

    p2 {
width: 100%;
font-family: "geogtq rg", Helvetica;
color: #00BDE5;
font-size: 15px;
float: left;
    }

    img {
float: right;
    }

    html{
margin: 0;
padding: 0;
border: none;
height: 100%;
    }

    body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-color: #D1E9ED;
background-repeat: repeat;
    }

    /* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */


    .container {
   height: 500px;
   width: 1050px;
   margin-top: 100px;
   display: inline-block;
    }

    .heading {
height: 90px;
width: 750px;
float: left;
margin-top: 125px;
background-color: #FFF;
margin-bottom: 35px;
margin-left: auto;
    }

    .heading2 {
height: 90px;
width: 750px;
float: left;
margin-top: 70px;
background-color: #FFF;
margin-bottom: 35px;
margin-left: auto;
    }

    .blog-container {
min-height: 100%;
width: 1050px;
margin-top: 100px;
background-color: #FFF;
display: table;
content: '';
clear: both;
    }

    .blog-container:after {
display: table;
content: '';
clear: both;
    }

    .work-container {
min-height: 100%;
width: 585px;
margin-top: 70px;
background-color: #FFF;
    }

    .slideshow {
width: 700px;
list-style: none;
position: relative;
margin-top: 50px;
    }

    ul.slideshow li {
position: absolute;
left: -2px;
top: -9px;
display: inline;
    }

    .navigation {
height: 75px;
width: px;
float: left;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: "geogtq sb";
position: fixed;
background-color: #FFF;
    }

    .menu-holder ul {
height: 75px;
padding: 0;
list-style-type: none;
     }

     .menu-holder ul li {
position: relative;
float: left;
line-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 50px;
margin-left: 0px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 0px;
     }

    .menu-holder ul li:hover ul {
 display: block;
 float: left;
 color: #000;
     }
     .menu-holder ul li a {
font-family: "geogtq md";
font-size: 20px;
display: block;
color: #00BDE5;
text-decoration: none;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 0px;
     }

     .menu-holder ul li a:hover {
color: #007985;
     }

     .menu-holder ul li ul {
 float: none;
 display: none;
 position: absolute;
 top: 35px;
 left: -10px;
 margin: -1px 0 0px 10px;
 padding: 5px 10px 5px 10px;
 white-space: nowrap;
     }
     .menu-holder ul li ul:hover {
 display: block;
     }
     .menu-holder ul li ul li {
 position: static;
 float: none;
 display: inline;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px -10px;
 margin-right: 20px;
    }

     .menu-holder ul li ul li a {
 display: inline;
 margin: 0 0px 0 0px;
 -webkit-border-radius: 0;
     }

    a:link {
text-decoration: none;
color: #000;
font-family: "geogtq sb";
    }

    a:hover {
text-decoration: none;
color: #000;
font-family: "geogtq sb";
    }

    ul {
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
margin-right: 40px;
    }

    ul li, ul li ul li {
display: inline;
position: relative;
float: left;
color: #00BDE5;
    }

    li ul {
        display: none;
        width: 450px;
margin-right: 20px;
    }
    ul ul li a {
        font-family: Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
        margin-right: 15px;
        white-space: nowrap;
        color: #00BDE5;
margin-right: 20px;
    }

    li:hover ul {
display: inline;
position: absolute; 
    }

    li:hover li {
        float: none;
        font-size: 15px;
        margin-top:3px;
    }

    .services1 a {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #00BDE5;
float: left;
list-style-type: none;
    }

    a:link {
text-decoration: none;
color: #00BDE5;
font-family: Helvetica, sans-serif;
text-align: center;
    }

    a:hover {
text-decoration: none;
color: #007889;
font-family: Helvetica, sans-serif;
text-align: center;
    }

    /* Thumb size 230 x 150 px */

    .work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
    }

    .work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: Helvetica, sans-serif;
color: #FFF;
overflow: hidden;
    }

    .work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: "geogtq rg";
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: centre;
font-size: 17px;
    }

    .work_thumbs li .type {
color: #01BDE6;
    }

    .work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: "geogtq rg";
text-align: centre;
font-size: 17px;
    } 

    .work_thumbs li .thumb {
margin-bottom: 15px;
display:block
    }

    .project {
width: 580px;
height: 100%;
margin-top: 0px;
margin-right: 100px;
left: auto;
background-color: #fff;
    }

  .single .header {
position:static
    }

    .single #sidebar a {
color:#000;
    }

    .single #sidebar a:hover {
color:#4f4f4f
    }       

    img.image {
    margin: 0px;
padding-bottom: 50px;
    }

    /* Set fixed top margin */ 

    #sidebar {
width: 273px;
height: 100px;
left: 50%;
top: 120px;
background-color: #FFF;
padding: 10px 20px 10px 10px;
color:#00C0EE;
font-family: Helvetica, sans-serif;
position: fixed;
color: #007789;
font-size: 15px;
    }

    #sidebar h1 {
font-family: Helvetica, sans-serif;
padding: 5px 0 15px 0;
font-weight: normal;
font-size: 18px;
color: #00C0EE;
    }

    #sidebar p {
padding-bottom: 15px;
font-family: Helvetica, sans-serif;
color: #007789;
height: 100%;
    }

    #sidebarwrapper {
right: 822px;
position: absolute;
width: 205px;
height: 200px;
top: 248px;
    }

    * {
margin: 0; padding: 0;
    }

    #page-wrap {
width: 600px;
margin: 15px auto;
position: relative;
    }

    #sidebar ul {
background: #EEE;
padding: 10px;
    }

    li {
float: left;
display: inline;
    }

    #main {
width: 700px;
float: left;
    }

    .project:after {
  display: table;
    content: '';
   clear: both;
    }

    a, img {
border:none;
    }

    #social {
width: 325px;
height: 50px;
float: right;
padding-right: 5px;
position: absolute;
left: 762px;
top: 900px;
    }

    #social img{
padding-right: 10px;
float: right;
    }

提前谢谢

Answer 1

您可以使用z-index。在标题的CSS和后面的幻灯片中。

有关z-index：http://html.net/tutorials/css/lesson15.php

的更深入信息

顺便说一下，如果要与position和z-index设置的其他元素做出正确反应，则需要使用position设置所有对象的z-index。

Answer 2

将z-index应用于#head。

#head {
  height: 100px;
  width: 1050px;
  border: none;
  margin: auto;
  background-color: #FFF;
  position: fixed;
  z-index: 1;
}

<强> http://jsbin.com/elIHuXO/2/edit

我网站上的幻灯片div不会落后于固定标题div

2 个答案: