Overlay Divs Without Absolute Position

Question

What follows is a long explanation, but it\'s the only way to effectively communicate the issue I\'m trying to resolve...

I am (somewhat desperately, and entirely un

Answer 1

None of the previous answers actually help with your requirement, which is to allow PPMiniCart to expand and contract without pushing imageWrapper down.

The trick here is to give wpPayPal a fixed height large enough to hold the contracted version of PPMiniCart (40px will do - this will give the shopping cart enough room, without pushing imageWrapper too far down).

#wpPayPal {
    height:40px;
}

Then give main (the container that holds wpPayPal) a z-index greater than that of imageWrapper so that it overflows over it.

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

Setting imageWrapper z-index to 100 kind of overdoes it, I would recommend 0 like I did above.

You also need some JavasScript to set overflow: visible on wpPayPal after PPMiniCart expands and remove it before it contracts. Fortunately Mini Cart JS exposes a nice event-driven API that allows custom callbacks. Since you are using jQuery in your webpage let's take advantage of that:

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

Please note the careful choice of afterShow and onHide callbacks, if you try to do it any different (setting overflow: visible before PPMiniCart expands or removing it before PPMiniCart contracts) PPMiniCart will "float up" during the transition.

---

Finally, a working fiddle is worth a thousand words.

Answer 2

Simple fiddle: Just CSS

Some guy posted another but it had a bunch of extra unnecessary code and some JS Another post had the answer but was missing something

.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*/
}

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

http://jsfiddle.net/3WDf7/

Answer 3

Got it!!! :D

Pure Css solution Very Easy. Put the following.

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

Replace whatever you have in css #main with what i have done above.

So remove the following:

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

Explanation: Main idea here is to float the main element, make it of certain height so at no point it pushes everything down. But make overflow of it visible. Overflow of content doesn't affect siblings of main element.

Answer 4

Div background for a block with a dynamic height can be implemented using flexbox without an absolute positioning:

/* 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>

The solution is supported by about 99% of browsers.

Answer 5

you can now to do this with grid also.

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

Answer 6

Also can use flexbox to make a tabs container without absolute position:

/* 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; }

<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>