覆盖没有绝对位置的 Div

Question

接下来是一个很长的解释，但这是有效传达我试图解决的问题的唯一方法……

我（有点绝望，但完全没有成功）试图在不使用绝对定位的情况下覆盖 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 来覆盖 div 的文章。也试过这个，首先将 z-index: -1 放在#main（包装 paypal 购物车的 div）上，但购物车消失了。也不知道它去了哪里，因为该网站的面包屑导航（也由#main 包裹）保持不变。

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

非常欢迎提出建议。我不是任何想像力的界面人员，只是一个知道如何使用 Google 的人，所以在此先感谢您清楚地阐明您的解决方案 :) 另外，仅供参考，目前我对购物车有最低高度要求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-->

ETC…

 #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;
}

原文由 jivers 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 patelarpan 发布，翻译遵循 CC BY-SA 4.0 许可协议