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

およびdiv (および)に適用position:absoluteするだけです。これにより、要素フローからそれらが取り出され、親 div が折りたたまれます。#logo#linkright:0#link

于 2013-04-19T14:33:20.637 に答える