问题
我有一个固定的标题和一个绝对定位的内容 div。它们都使用 top 值定位，并且在页面高度达到需要滚动条出现的高度之前一直保持良好状态。
然后绝对定位的 div 随页面移动并堆叠在页眉下。
注意:绝对定位的 div“相框”必须能够水平滚动。
我制作了一个 JsFiddle 来更好地演示我要解释的内容。
我的 CSS
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
*, :before, :after {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End of CSS reset*/
a:link {
color: #FFF;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #FFF;
text-decoration: none;
} /* visited link */
a:hover {
color: #FFF;
text-decoration: none;
} /* mouse over link */
a:active {
color: #030303;
text-decoration: none;
font-size: 100%;
} /* selected link */
html{
height:100%;
}
body{
background-color:#424242;
height:100%;
}
#spacer
{
height:400px
}
#headerWrapper {
position: fixed;
display: inline-block;
width: 100%;
height:400px auto;
z-index: 999;
top: 0;
}
#headerWrapper #header{
position: fixed;
display: inline-block;
width: 100%;
height: 200px;
z-index: 999;
top: 0;
}
#headerWrapper #header #title{
position: fixed;
font-size: 3em;
color: #FFF;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10px;
top: 0px;
}
#headerWrapper #header #tagline{
position: fixed;
font-size: 2em;
color: #d3701e;
margin-left: 30px;
top: 90px;
}
#tabsContainer {
padding: 0;
margin-left:18px;
position: fixed;
top: 120px;
font-size: 14px;
line-height: 18px;
font-family: "swiss", "Arial", sans-serif;
font-weight: 400;
text-transform: uppercase;
cursor: default;
white-space:nowrap;
}
#tabsContainer ul {
list-style: none;
margin: 0;
padding: 0;
font-size:24px;
}
#tabsContainer ul li {
display: inline;
margin: 0px;
display: block;
height: 50px;
text-align: center;
line-height: 30px;
font-size:24px;
}
#tabsContainer ul li a {
height: 33px;
display: block;
float: left;
padding: 17px 15px 0 15px;
font: bold 12px Arial;
color: #FFF;
text-decoration: none;
font-size:24px;
}
#tabsContainer ul li a:hover {
color: #d3701e;
height: 50px;
font-size: 24px;
}
#tabsContainer ul li #active a {
color: #d3701e;
background: url(images/navigation-hover.png) repeat-x left top;
font-size:24px;
}
.tab{
float: left;
font-size:24px;
}
.tab.one
{
width:220px;
font-size:24px;
}
/*#photoframeContainer{
padding-top: 10px;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 20px;
padding-bottom: 20px;
position: absolute;
bottom:0px;
}*/
#photoframe {
position: absolute;
padding: 0 25px 0 25px;
height: 600px;
top: 242px;
overflow: visible;
white-space: nowrap;
left: 0px;
}
#photoframe .imageContainer {
height: 100%;
margin: 0 5px 0 5px;
display: inline-block;
position: relative;
overflow: hidden
}
#photoframe .imageContainer img {
height: 100%;
padding: 0;
margin: 0;
z-index: 1
}
.upload
{
float: left;
vertical-align: baseline;
}
我的 HTML
<body>
<div id="headerWrapper">
<div id="header">
<div id="title">
<h1>Bass Clef Photography</h1>
</div>
<div id="tagline">Passion 4 Live Music & Passion 4 Photography</div>
<div id="tabsContainer">
<div class='tab zero'>
<ul>
<li><a href="BassClef.html">Home</a></li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a></li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a></li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="spacer"></div>
<div id="photoframeContainer">
<div id="photoframe">
<div class="imageContainer"><img class="resize" src="uploads/picture02.jpg" alt=""></div>
<div class="imageContainer"><img class="resize" src="uploads/picture03.jpg" alt=""></div>
<div class="imageContainer"><img class="resize" src="uploads/picture04.jpg" alt=""></div>
<div class="imageContainer"><img class="resize" src="uploads/picture05.jpg" alt=""></div>
<div class="imageContainer"> <img class="resize" src="uploads/picture06.jpg" alt=""></div>
<div class="imageContainer"><img class="resize" src="uploads/picture07.jpg" alt=""></div>
<div class="imageContainer"><img class="resize" src="uploads/picture08.jpg" alt=""></div>
</div>
</div>
</body>
最佳答案
鉴于这种情况，您有两个好的选择和一个坏的选择。第一个是让所有东西都静态定位并给图像容器设置宽度，并在照片容器上使用 overflow:auto。这将为 div 本身提供一个滚动条，就像代码块的堆栈溢出中使用的那样(请参阅上面的代码)。否则，我强烈建议使用 javascript 或 jquery slider 。实现起来更容易，每次向页面添加一些内容时，您都不必与 css 打交道。
糟糕的选择是丢失#photoframe 元素上的间隔符和绝对定位，然后像这样将padding-top:242px 添加到#photoframe:
#photoframe {
position: static;
padding: 0 25px 0 25px;
padding-top:242px;
height: 600px;
overflow: visible;
white-space: nowrap;
这是一个 example .这是一个糟糕的选择的原因是，如果您每个人都必须在页面的其他地方添加菜单项或内容，您仍然必须与 css 作斗争。在大多数情况下，固定定位确实是一场噩梦，移动/平板设备根本无法很好地处理它。
关于html - 如何阻止绝对定位的 div 堆叠在固定的 div 之上/之下？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23506340/