1

所以一切看起来都很好并且工作正常，除非你向下滚动缩略图所在的位置并且左栏直接与缩略图相对，你无法选择它们......我知道 z-index div 正在覆盖它，这就是原因我无法选择它们，但我需要弄清楚如何解决这个问题，但我似乎无法弄清楚。也许是一个 jquery 解决方案？

http://originalpenguinaccessories.com/midwest/

更新了一个示例...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#headerContainer {
width: 100%;
position:fixed;
z-index:9999;
display:inline;
}
#topbar {
width: 100%;
height: 20px;
background-color: #004570;
-webkit-box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo {
background-color: #004570;
height: 360px;
width: 250px;
margin-left: 50px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
display: inline-block;
-webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo img {
margin-top: 30px;
margin-left: 15px;
}
#logo h2 {
    margin-top: 100px;
    color: white;
    letter-spacing: 1px;
}
#link {
    background-color: #004570;
    float: right;
    width: 135px;
    height: 55px;
    text-align: center;
    margin-right: 40px;
    color: white;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
    box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#link p {
    font-size: .8em;
}
#contentContainer {
    width: 40%;
}

</style>


</head>

<body>
<div id="headerContainer">
    <div id="topbar"></div>
    <div id="logo">
    <img src="" alt="">
     <h2>Lorem ipsum dolor sit amet</h2>

</div>
<div id="link">
    <p>Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
     <h6>Lorem ipsum dolor sit amet</h6>

</div>
</div>
<div id="contentContainer">
 <h3>Lorem ipsum dolor sit amet</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="image-grid">
    <div class="imageDiv"> <a href="images/thumb.jpg" rel="lightbox" title="my caption">Link</a>

         <h4>M442</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="imageDiv"> <a href="images/thumb.jpg" rel="lightbox" title="my caption">Link</a>

         <h4>M442</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="imageDiv"> <a href="images/thumb.jpg" rel="lightbox" title="my caption">Link</a>

         <h4>M442</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="imageDiv"> <a href="images/thumb.jpg" rel="lightbox" title="my caption">Link</a>

         <h4>M442</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>
</body>
</html>
4

2 回答 2

1

试试这个。

＃标识 {
    位置：相对；
    z 指数：100；
}

.fs-pager-wrapper {
    z 指数：50；
}
于 2013-04-19T14:35:14.597 回答
1

只需适用position:absolute于您的#logo和#linkdiv（以及right:0）#link。这会将它们带出元素流，并且父 div 将折叠。

于 2013-04-19T14:33:20.637 回答