所以一切看起来都很好并且正常工作，除非你向下滚动缩略图的位置，而左边的条直接在缩略图的对面，你无法选择它们......我知道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>
答案 0 :(得分：1)
只需将position:absolute应用于#logo和#link div（以及right:0的{{1}}）。这将使它们脱离元素流，父div将崩溃。
答案 1 :(得分：1)
试试这个。
#logo {
position: relative;
z-index: 100;
}
.fs-pager-wrapper {
z-index: 50;
}