html - 覆盖没有绝对位置的 Div

Question

下面是一个很长的解释，但这是有效传达我正在努力解决的问题的唯一方法......

我(有些绝望，但完全没有成功)试图在不使用绝对定位的情况下覆盖 div。需求源于我通过 Javascript 放置在网站上的 paypal 购物车。购物车的自然位置紧靠网页的上边缘(不是它包含的 div，即 #wpPayPal，或此 div 的包装，#main)。

该脚本的作者强烈建议不要自定义购物车的样式表，但我找到了他编写的教程，该教程允许将购物车插入占位符 div 中，其中包含适用于容器的定位说明 - 我能够将购物车放置在网站的顶部横幅部分。然而……

购物车的 HTML 表单和其中的一个 ul 元素在购物车的样式表中都有高度要求，这会将页面的主要内容(由容器 div #imageWrapper 包裹)推到页面下方太远可以接受。

我试图将#imageWrapper 置于#main 之上，并从该网站的帖子中收集了一些想法，但没有成功。我已经在#imageWrapper 上尝试过绝对定位，但这可以让页脚浮在下方。 #imageWrapper 的高度是可变的，因此我不想将页脚与高度保持在适当的位置，因为防止重叠的最小高度会使页脚向下推得太远，以至于网站的大部分内容都无法显示。

我还尝试从购物车表单的 CSS 中提取 position:relative，但购物车立即飘回网页顶部。 margin, top-margin 等，不补救。

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

然后我将 main 的 z-index 设置为 0，并将 position:relative 应用到 #imageWrapper 和 z-index:100。购物车重新出现，但仍然按住#imageWrapper。

非常欢迎提出建议。我不是任何想像力的界面人员，只是一个知道如何使用 Google 的人，所以在此先感谢您清楚地阐明您的解决方案 :) 另外，仅供引用，目前我对购物车有最低高度要求form 设置为 0，并将其中的 UL 元素设置为 height:auto。购物车中只有一个元素，这允许 #imageWrapper 将页面向上移动到足以被接受的程度，但这不是一个可行的长期解决方案。

这是一个 example page - 要查看购物车，请使用主图像下方显示的下拉菜单添加元素。在其展开状态下，您会看到#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: 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;
}

Answer 1

您现在也可以使用网格来做到这一点。

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}

<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>