相关疑难解决方法(0)

以下是一个很长的解释,但这是有效传达我正试图解决的问题的唯一方法......

我(有点绝望,并且完全没有成功)尝试在不使用绝对定位的情况下覆盖div.需求源于我通过Javascript放置在网站上的paypal购物车.购物车的自然位置很难对网页的上边距(不包含div,即#wpPayPal,或者这个div的包装,#main).

该剧本的作者强烈建议不要自定义购物车的样式表,但我找到了他编写的教程,可以将购物车插入占位符div,并且容器的定位说明有效 - 我能够将购物车放在网站的顶部横幅下方部分.然而...

购物车的HTML表单和每个元素中的ul元素都在购物车的样式表中有高度要求,这推送了页面的主要内容,由容器div #imageWrapper包装,在页面下方太远是可以接受的.

我尝试将#imageWrapper置于#main上,并从本网站的帖子收集了一些想法,但没有成功.我已经尝试在#imageWrapper上进行绝对定位,但这会让页脚浮动到下面.#imageWrapper的高度是可变的,因此我不想将页脚高度保持在适当的位置,因为防止重叠的最小高度会将页脚向下推得太远而无法访问网站的大部分内容.

我也试过拉动位置:相对于购物车形式的CSS,但购物车立即浮动回到网页的顶部.保证金,保证金等等,不能解决这个问题.

然后我读了一篇关于使用position:relative和z-index来叠加div的文章.试过这个,首先把z-index:-1放在#main(包裹paypal购物车的div)上,但购物车消失了.不知道它在哪里,因为该网站的痕迹导航也被#main包裹,仍然存在.

然后我将main的z-index设置为0并应用位置:相对于#imageWrapper,z-index:100.购物车重新出现,但仍然保持#imageWrapper.

建议非常欢迎.我不是任何想象力的界面人,只是一个知道如何使用谷歌的人,所以提前感谢清楚明确表达你的决议:)另外,仅供参考,我现在有购物车的最小高度要求将form设置为0,并将UL元素设置为height:auto.由于购物车中只有一个商品,这使得#imageWrapper可以向上移动页面足够可接受,但这不是一个可行的长期解决方案.

这是一个示例页面 - 要查看购物车,请使用主图像下方显示的下拉列表添加项目.在扩展状态下,您将看到#imageWrapper如何对抗它.

我在下面列出了部分违规HTML/CSS:

<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> &raquo;</span></span>
    </div> <!--end breadcrumbs -->
</div><!-- end Main -->

<div id="imageWrapper">
    <div id="imageInnerWrapper">
        <div id="featureImage">
            <div class="filename"><h1>~&nbsp;Bryce Canyon Sunrise | Bryce Canyon | Utah&nbsp;~</h1>
            </div><!--end filename-->

等等...

#main {
    display: inline;
    position: relative;
    z-index: 0;
}

#imageWrapper {
    clear: both;
    width: …