防止一個div內容投奔其他分區

我已經建立了css和div的一個HTML佈局。我有div的所謂的頂部（也就是標題），左（其中鏈接的頁面）和中心（用於顯示圖像）。防止一個div內容投奔其他分區

當我點擊一個鏈接顯示在左側的圖像上，我可能會得到比瀏覽器窗口，在這裏我需要滾動更大的圖像。我可以scrool，但圖像會通過我看不到標題的頂部。我想要做的是，頂部總是在瀏覽器窗口上。當我在中心滾動的圖像，如果他們去我頂格上面，我喜歡隱藏正在穿越頂格部分。有沒有辦法做到這一點在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; 
}

來源

2012-07-26 Mike Dude

爲什麼你的'＃center1'位置設置爲靜態的？ – j08691 2012-07-26 14:52:29

請張貼的jsfiddle – 2012-07-26 14:52:51

使用你的頭的z-index屬性，並設置如果您正在使用position:relative，position:absolute或position:fixed它100或1000的z-index只適用。

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

來源

2012-07-26 14:52:42

@Rouge編碼器，什麼中心呢？它不起作用。仍然看到相同的行爲。我有所有三個div作爲position.fixed。 – 2012-07-26 14:57:24

這是一個持久標題。我希望這對你的作品，但你必須修改它以滿足您的需要......

<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-26 19:57:27 Scorpio

防止一個div內容投奔其他分區

回答

相關問題