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

使用z-index标题上的属性并将其设置为 100 或 1000。Z-index 仅在您使用position:relative,position:absolute或position: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 回答