以下是一段较长的说明，但这是有效传达我要解决的问题的唯一方法...
我正在（有些绝望地，并且完全不成功地）尝试在不使用绝对定位的情况下叠加div。需要的原因源自我通过Javascript将paypal购物车放置在网站上。购物车的自然位置紧贴网页的顶部边缘（而不是其所包含的div，即#wpPayPal，或者该div的包装器#main）。
脚本的作者强烈建议不要自定义购物车的样式表，但我找到了他写的一个教程，它使得可以将购物车插入到一个占位符div中，并提供了容器的定位指令，可以使其正常工作-我能够将购物车定位在网站顶部横幅节的下方。然而...
购物车的HTML表单和每个ul元素在购物车的样式表中具有高度要求，这将页面的主要内容（由容器div#imageWrapper包装）向下推得太远，无法接受。
Here's an example page - to see the cart, add an item using the dropdown that appears below the main image. In its expanded state, you'll see how #imageWrapper sits against it.
I've included portions of the offending HTML / CSS below:
我正在（有些绝望地，并且完全不成功地）尝试在不使用绝对定位的情况下叠加div。需要的原因源自我通过Javascript将paypal购物车放置在网站上。购物车的自然位置紧贴网页的顶部边缘（而不是其所包含的div，即#wpPayPal，或者该div的包装器#main）。
脚本的作者强烈建议不要自定义购物车的样式表，但我找到了他写的一个教程，它使得可以将购物车插入到一个占位符div中，并提供了容器的定位指令，可以使其正常工作-我能够将购物车定位在网站顶部横幅节的下方。然而...
购物车的HTML表单和每个ul元素在购物车的样式表中具有高度要求，这将页面的主要内容（由容器div#imageWrapper包装）向下推得太远，无法接受。
我曾经试图通过在网站上收集的几个帖子中获得的一些想法来将#imageWrapper定位在#main之上，但没有成功。我尝试了在#imageWrapper上使用绝对定位，但这使页脚可自由浮动。#imageWrapper的高度是可变的，因此我不想通过高度来固定页脚位置，因为为了防止重叠而设置的最小高度会使大部分网站内容的页脚下移太远。
我还尝试从购物车表单的CSS中删除position:relative，但购物车立即浮动回网页的顶部。Margin、top-margin等都无法解决这个问题。
然后我读了一篇关于使用position:relative和z-index叠加divs的article。我先尝试了在#main（包裹paypal购物车的div）上放置z-index: -1，但购物车消失了。也不确定它去了哪里，因为同样被#main包裹的面包屑导航仍然在原地。
然后我将main的z-index设置为0，并将position:relative应用于#imageWrapper，同时设置z-index:100。购物车重新出现了，但仍然把#imageWrapper压住了。
Suggestions are greatly welcomed. I'm not an interface person by any stretch of the imagination, just a guy who knows how to use Google, so thanks in advance for clearly articulating your resolution :) Also, FYI, presently I have the min-height requirement for the cart form set to 0, and set the UL element within to height:auto. With only a single item in the cart, this allows #imageWrapper to move up the page enough to be acceptable, but this is not a viable long-term solution.Here's an example page - to see the cart, add an item using the dropdown that appears below the main image. In its expanded state, you'll see how #imageWrapper sits against it.
I've included portions of the offending HTML / CSS below:
<div id="main">
<div id="wpPayPal">
</div><!--end wpPayPal-->
<div id="breadcrumbs">
<span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</h1>
</div><!--end filename-->
等等...
#main {
display: inline;
position: relative;
z-index: 0;
}
#imageWrapper {
clear: both;
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#imageInnerWrapper {
width: 840px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 100;
}
#featureImage {
width: 840px;
margin: 0 auto;
padding: 0;
}
#wpPayPal {
overflow: hidden;
float: right;
margin-right: 100px;
min-width: 365px;
min-height: 20px;
}
/* Override the default Mini Cart styles */
#wpBody #PPMiniCart form {
position: relative;
right: auto;
width: auto;
min-height: 0;
}
#wpBody #PPMiniCart form ul {
height: auto;
}