1

css と div を使用して html レイアウトを作成しました。top (ヘッダー)、left (ページへのリンクがある場所)、center (表示する画像) という div があります。

リンクをクリックして左側に画像を表示すると、スクロールする必要があるブラウザ ウィンドウよりも大きな画像が表示されることがあります。スクロールできますが、ヘッダーが表示されていない上部セクションに画像が表示されます。私がやりたいことは、常にブラウザウィンドウのトップセクションです。中央の画像をスクロールするときに、画像が一番上の div の上にある場合、一番上の div を横切るセクションを非表示にするのが好きです。cssでこれを行う方法はありますか?

#top {
height: 300px;
width: 100%;
position: fixed;
}

#left {


    padding:0;
    border: 0;
    width: 350px;
    overflow: scroll;
    float: left;
    position: fixed;
    top: 5px; 
    bottom:0px;
    min-height:950px;

}

#center1 {
margin-left:352px;
padding:0;
border: 0;
float: left;
position:static;
overflow: hidden;
display: block;
}
4

2 に答える 2

3

ヘッダーの属性を使用して、100 または 1000 に設定します。Z-index は、またはz-indexを使用している場合にのみ機能します。position:relativeposition:absoluteposition:fixed

#top {
    height: 300px;
    width: 100%;
    position: fixed;
    z-index: 1000;
}
于 2012-07-26T14:52:42.133 に答える
0

これは永続的なヘッダーです。これがうまくいくことを願っていますが、ニーズに合わせて変更する必要があります... 

<DOCTYPE html>
<html>
<head>
<title>Constant Header</title>
<style type="text/css">

body 
{ 
margin:0; 
padding:0; 
}

#header_container 
{ 
background:#eee; 
border:1px solid #666; 
height:60px; 
left:0; 
position:fixed; 
width:100%; 
top:0; 
}
#header
{ 
line-height:60px; 
margin:0 auto; 
width:940px; 
text-align:center; 
}

/* CSS for the content of page. Top padding of 80px to make sure the header do not         overlap the content.*/

#container 
{ 
margin:0 auto;
overflow:auto;
padding:80px 0;
width:100%;
}
#content{}

#left {
padding:0;
border: 0;
width: 150px;
float: left;
position: fixed;
top: 85px; 
bottom:0px;
min-height:950px;
}

#center1 {
margin-left:152px;
padding:0;
border: 0;
float: left;
position:static;
overflow: hidden;
display: block;
}
</style>
</head>
<body>
<div id="header_container">
  <div id="header">
      Header Content
  </div>
</div>
<!-- BEGIN: Page Content -->
<div id="container">
  <div id="left">
     <a href="large_img.jpg" alt="large image">nav to img </a>
  </div>
  <div id="center1">
    <img id="imgLogo" src="" alt="large image"/>
      ...
  </div>
</div>
<!-- END: Page Content -->
</body>
</html>
于 2012-07-26T19:57:27.943 に答える