Overlay Divs Without Absolute Position

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 unsuccessfully) trying to overlay divs without the use of absolute positioning. The need stems from a paypal cart that I place on the site via a Javascript. The cart's natural position is hard against the top margin of the webpage (not its containing div, which is #wpPayPal, or the wrapper for this div, #main).

The script's author strongly recommends against customizing the cart's stylesheet, but I found a tutorial he wrote that enables insertion of the cart into a placeholder div, with positioning instructions for the container that works - I was able to position the cart below the site's top banner section. However...

The cart's HTML form and a ul element within each have height requirements in the cart's stylesheet, and this pushes the page's main content, wrapped by the container div #imageWrapper, too far down the page to be acceptable.

I tried to position #imageWrapper over #main with several ideas gathered from posts on this site with no success. I've tried absolute positioning on #imageWrapper, but this frees the footer to float beneath. #imageWrapper's height is variable, hence I do not want to hold the footer in place with height, since the min-height to prevent overlap would push the footer down too far for much of the site's content.

I also tried pulling position:relative from the cart form's CSS, but the cart immediately floats back to the top of the webpage. Margin, top-margin, etc.,do not remedy this.

I then read an article on using position:relative and z-index to overlay divs. Tried this, too, first by putting z-index: -1 on #main (the div that wraps the paypal cart), but the cart disappears. Not sure where it goes, either, since the site's breadcrumb nav, also wrapped by #main, stayed put.

I then set the z-index for main to 0 and applied position:relative to #imageWrapper with z-index:100. The cart reappeared but still holds #imageWrapper down.

Suggestions are greatly welcomed. I'm not an interface person by any stretch of the imagination, just a guy who knows how to use Google, so thanks in advance for clearly articulating your resolution :) Also, FYI, presently I have the min-height requirement for the cart form set to 0, and set the UL element within to height:auto. With only a single item in the cart, this allows #imageWrapper to move up the page enough to be acceptable, but this is not a viable long-term solution.

Here's an example page - to see the cart, add an item using the dropdown that appears below the main image. In its expanded state, you'll see how #imageWrapper sits against it.

I've included portions of the offending HTML / CSS below:

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

Solution 1:

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>

Solution 2:

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.

Solution 3:

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/

Solution 4:

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.

Overlay Divs Without Absolute Position

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts