Html 无绝对位置的叠加div

下面是一个很长的解释，但这是有效沟通我试图解决的问题的唯一方式

我（有点绝望，完全没有成功）试图在不使用绝对定位的情况下覆盖div。这种需求源于我通过Javascript在网站上放置的paypal购物车。购物车的自然位置很难与网页的上边距相对（不是它的包含div，即#wpPayPal，也不是这个div的包装，即#main）

该脚本的作者强烈建议不要定制购物车的样式表，但我发现他编写的一个教程支持将购物车插入占位符div，并提供了有效容器的定位说明-我能够将购物车定位在站点顶部横幅部分下方。然而

购物车的HTML表单和每个表单中的ul元素在购物车的样式表中都有高度要求，这会将页面的主要内容（由容器div#imageWrapper包装）推到页面下方太远而无法接受

我试图用从这个网站上的帖子中收集到的一些想法来定位#imageWrapper over#main，但没有成功。我尝试过在#imageWrapper上进行绝对定位，但这样可以使页脚在下方自由浮动#imageWrapper的高度是可变的，因此我不想用高度来固定页脚，因为防止重叠的最小高度会将页脚向下推得太远，无法容纳网站的大部分内容

我还尝试从cart表单的CSS中拉出position:relative，但cart会立即浮回网页顶部。保证金、最高保证金等，不纠正这一点

然后我读了一篇关于使用position:relative和z-index覆盖div的文章。也尝试过这样做，首先将z-index:-1放在#main（包装paypal购物车的div）上，但购物车消失了。也不知道它去了哪里，因为该网站的面包屑导航也由#main包裹，保持不变

然后，我将main的z索引设置为0，并应用位置：相对于z索引为100的#imageWrapper。手推车又出现了，但仍然保持着

我们非常欢迎提出建议。我不是一个界面的人，只是一个知道如何使用谷歌的人，所以提前感谢你清楚地阐述了你的解决方案：）另外，仅供参考，目前我将购物车表单的最小高度要求设置为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-->

---

前面的答案实际上都不能满足您的要求，即允许

PPMiniCart

在不按下

imageWrapper

的情况下展开和收缩

这里的诀窍是给

wpPayPal

一个足够大的固定高度，以容纳

PPMiniCart

的合同版本（40px就可以了-这将给购物车足够的空间，而不会把

imageWrapper

推得太远）

然后给

main

（容纳

wppaypalpal

的容器）一个大于

imageWrapper

的

z索引，使其溢出

#main {
    z-index: 1;
}
#imageWrapper {
    z-index: 0;
}

将
imageWrapper
z-index设置为100种，我会像上面一样推荐0

您还需要一些JavasScript来设置
溢出：在
wpPayPal
上的
可见
在
PPMiniCart
收缩之前展开并移除它。幸运的是，它公开了一个很好的事件驱动API，允许自定义回调。既然您在网页中使用jQuery，那么让我们利用它：

PAYPAL.apps.MiniCart.render({
    parent: 'wpPayPal',
    events: {
        afterShow: function () {
            $("#wpPayPal").css("overflow", "visible");
        },
        onHide: function () {
            $("#wpPayPal").css("overflow", "");
        }
    }
});

请注意，如果您尝试执行任何不同的操作（设置
overflow:visible
before
PPMiniCart
展开或在
PPMiniCart
合约之前移除它），请仔细选择
afterShow
和
onHide
回调）
PPMiniCart
将在转换期间“浮动”


最后，一句话胜过千言万语

明白了！！！：D

纯Css解决方案非常简单放置以下内容

#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}

将css
#main
中的所有内容替换为上面我所做的

因此删除以下内容：

display: inline;
position: relative;
z-index: 0;

说明：
这里的主要思想是使主要元素浮动，使其具有一定的高度，因此在任何时候它都不会将所有东西向下推。但要使溢出的内容可见。内容溢出不会影响主元素的兄弟元素，
简单的小提琴：只是CSS

有些人发布了另一个，但它有一堆额外的不必要的代码和一些JS
另一篇帖子给出了答案，但遗漏了一些东西


。完毕{
背景：rgba（230,6,6,5）；
浮动：对；
高度：460px；
利润上限：-500px；
右边距：159px；
溢出：可见；
位置：相对位置；
宽度：560px；
颜色：#FFFFFF；
/*只是为了好看*/
z指数：1000；
填充：20px/*仅用于外观*/
}
.跨距{
位置：相对位置；
/*只是为了好看*/
顶部：15px；
/*只是为了好看*/
}
.这个{
宽度：560px；
高度：460px；
颜色：#FFFFFF；
/*只是为了好看*/
填充：20px；
/*只是为了好看*/
背景图像：url（“http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
/*只是为了好看*/
}
处于
…或不在
下，为您的问题找到了一个优雅的解决方案，无需使用flexbox进行绝对定位或浮动-主要优点是
#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}

display: inline;
position: relative;
z-index: 0;