Question

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

我（有点绝望，并且完全没有成功）试图在不使用绝对定位的情况下覆盖div。需求源于我通过Javascript放置在网站上的paypal购物车。购物车的自然位置难以抵挡网页的上边距（不包含其中的 #wpPayPal ，或此div的包装， #main ）。< / p>

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

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

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

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

然后我使用position：relative和z-index读取article来覆盖div。试过这个，首先把z-index：-1放在#main（包裹paypal购物车的div）上，但购物车消失了。不知道它在哪里，因为该网站的痕迹导航也被#main包裹，仍然存在。

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

建议非常欢迎。我不是任何想象力的界面人，只是一个知道如何使用谷歌的人，所以提前感谢清楚明确表达你的决议:)另外，仅供参考，我现在有购物车的最小高度要求将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

简单的小提琴：只是CSS

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

＆＃13;

.over {
  background: rgba(230, 6, 6, .5);
  float: right;
  height: 460px;
  margin-top: -500px;
  margin-right: 159px;
  overflow: visible;
  position: relative;
  width: 560px;
  color: #FFFFFF;
  /* Just for looks*/
  z-index: 1000;
  padding: 20px/* Just for looks*/
}

.over span {
  position: relative;
  /* Just for looks*/
  top: 15px;
  /* Just for looks*/
}

.this {
  width: 560px;
  height: 460px;
  color: #FFFFFF;
  /* Just for looks*/
  padding: 20px;
  /* Just for looks*/
  background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
  /* Just for looks*/
}

＆＃13;

<div class="this">To BE UNDER</div>
<div class="over"><span>..or not To BE UNDER</span></div>

＆＃13;

http://jsfiddle.net/3WDf7/

Answer 2

得到了!!! ：d

Pure Css解决方案非常简单。点击以下内容。

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

替换 css #main 中的所有内容我已完成的内容。

所以删除以下内容：

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

<强>说明：这里的主要思想是浮动主要元素，使其具有一定高度，所以在任何时候它都不会将所有东西都推倒。但是要使溢出可见。内容溢出不会影响主要元素的兄弟 。

Answer 3

具有动态高度的块的Div背景可以使用flexbox实现，而无需绝对定位：

/* Every rule not marked by "required" is optional and used only to decorate the example */
.block {
    margin: 10px 50px;
    display: flex; /* required */
    flex-flow: row nowrap; /* required */
}
.block .background,
.block .foreground {
    box-sizing: border-box; /* required */
    width: 100%; /* required */
    flex: none; /* required */
}
.block .background {
    background: #9ff;
    color: #fff;
    padding: 15px;
    font-size: 30px;
}
.block .foreground {
    padding: 15px;
    border: solid 1px;
    margin-left: -100%; /* required */
}
.block .foreground .outside {
    position: absolute;
    top: 5px;
    left: 8px;
}

<div class="block">
    <div class="background">
        Background
    </div>
    <div class="foreground">
        <div>
            <div class="outside">Outside</div> <!-- The "outside" div is also optional -->
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.</div>
        </div>
    </div>
</div>

该解决方案由about 97% of browsers支持。

Answer 4

之前的答案都没有真正有助于您的要求，即允许PPMiniCart扩展和收缩而不会推迟imageWrapper。

这里的诀窍是给wpPayPal一个足够大的固定高度，以容纳PPMiniCart的缩小版本（40px会做 - 这将为购物车提供足够的空间，而无需推送{{1} } 太远了）。

imageWrapper

然后将#wpPayPal { height:40px; }（容纳main的容器）wpPayPal的{{1}}大于z-index，以使其溢出。{/ p>

imageWrapper

将#main { z-index: 1; } #imageWrapper { z-index: 0; } z-index设置为100种过度，我会推荐0，就像我上面做的那样。

在imageWrapper扩展后，您还需要一些JavasScript在overflow: visible上设置wpPayPal，并在合同签署之前将其删除。幸运的是，Mini Cart JS公开了一个很好的事件驱动API，允许自定义回调。由于您在网页中使用jQuery，我们可以利用它：

PPMiniCart

请注意谨慎选择PAYPAL.apps.MiniCart.render({ parent: 'wpPayPal', events: { afterShow: function () { $("#wpPayPal").css("overflow", "visible"); }, onHide: function () { $("#wpPayPal").css("overflow", ""); } } });和afterShow回调，如果您尝试进行任何不同的操作（在onHide扩展或overflow: visible之前设置PPMiniCart PPMiniCart 1}}契约）PPMiniCart将在过渡期间“浮起”。

最后，working fiddle值得千言万语。

Answer 5

为您的问题找到一个优雅的解决方案，没有绝对定位或使用flexbox浮动 - 主要优点是在计算父高度时都会尊重两个div高度。对于在图像上叠加文本非常有用：

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 500px;
  /*border: 1px solid lime;*/
}

.card {
  display: flex;
  /*border: 1px solid red;*/
  overflow: hidden;
}

.box {
  position: relative;
  min-width: 100%;
  width: 100%;
  flex-basis: 100%;
  flex-grow: 1;
}

.box--image {
  z-index: 1;
  overflow: hidden;
}

.box--image.box--heightrestricted {
  max-height: 300px;
}

.box--text {
  z-index: 2;
  margin-left: -100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: red;
}

.box--text h3 {
  margin: 0;
  padding: 1rem;
}

<div class="container">

  <button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
  <br>
  <br>

  <div class="card">

    <div id="imagebox" class="box box--image box--heightrestricted">
      <img src="https://placeimg.com/640/640/4" alt="" />
    </div>

    <div class="box box--text">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
    </div>

  </div>

</div>

Answer 6

你现在也可以用网格来做这件事。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

也可以使用flexbox制作没有绝对位置的标签容器：

＆＃13;

/* Flex Overflow */
section {
  display: flex;
  width: 100%;
  overflow: hidden;
}

section article {
  flex: 100% 0 0;
  order: 0;
}

section article:target {
  order: -1;
}

/* UI */
section { background-color: #ecf0f1; }
section article { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecf0f1;
  font-size: 20px;
  min-height: 8em;
  visibility: hidden;
  opacity: 0;
  transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
  visibility: visible;
  opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }

＆＃13;

<ul>
  <li><a href="#zoneA">Zone A</a></li>
  <li><a href="#zoneB">Zone B</a></li>
  <li><a href="#zoneC">Zone C</a></li>
  <li><a href="#zoneD">Zone D</a></li>
</ul>

<section>
  <article id="zoneA">A</article>
  <article id="zoneB">B</article>
  <article id="zoneC">C</article>
  <article id="zoneD">D</article>
</section>

＆＃13;

覆盖没有绝对位置的Div

7 个答案: