Question

我用css和div构建了一个html布局。我有div称为top（这是标题），left（链接用于页面）和center（用于显示图像）。

当我点击左侧显示图像的链接时，我可能会得到比浏览器窗口更大的图像，我需要滚动。我可以流口水，但是图像越过顶部，我的头部没有看到。我想做的是，顶部始终在浏览器窗口。当我在中心滚动图像时，如果它们超过我的顶部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;
}

Answer 1

使用标题上的z-index属性并将其设置为100或1000.只有在使用position:relative，position:absolute或position:fixed时，Z-index才有效。< / p>

#top {
    height: 300px;
    width: 100%;
    position: fixed;
    z-index: 1000;
}

Answer 2

这是一个持久的标题。我希望这对你有用，虽然你必须修改它以满足你的需要......

<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>

防止div内容超过其他div

2 个答案: