无绝对位置覆盖Div

本文介绍了无绝对位置覆盖Div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

接下来是一个长时间的解释，但它是有效沟通我正试图解决的问题的唯一方法...

我（有点绝望地，并且完全不成功）尝试覆盖div而不使用绝对定位。需求源于我通过Javascript放置在网站上的贝宝购物车。购物车的自然位置对网页的顶部边界（不包含其包含的div， #wpPayPal ，或该div的包装， #main ）很难。

该脚本的作者强烈建议不要自定义购物车的样式表，但我发现他编写的一个教程使得可以将购物车插入到占位符div中，作品 - 我可以将购物车放在网站顶部横幅部分的下方。但是...

在购物车的样式表中，购物车的HTML表单和ul元素都有高度要求，并且这会推送由容器div包装的页面的主要内容 #imageWrapper ，页面太远以至于无法接受。

我尝试将#imageWrapper放在#main上，这个网站没有成功。我已经在#imageWrapper上尝试过绝对定位，但是这会将页脚释放到下面。＃imageWrapper的高度是可变的，因此我不想用高度将页脚保持在原位，因为为防止重叠而使用的最小高度会将页脚向下推到网站的大部分内容中。

我也试着从购物车表单的CSS中拉出相对位置，但购物车立即浮回到网页的顶部。保证金，顶部保证金等等，请不要对此进行补救。

然后我读了一篇关于使用position：relative和z-index覆盖div。尝试了这一点，首先在zmain上放置z-index：-1（包装paypal购物车的div），但购物车消失了。因为网站的面包屑导航栏也被#main包裹，所以它仍然保留。

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

建议非常受欢迎。我不是任何想象中的界面人物，只是一个知道如何使用谷歌的人，所以提前感谢你清楚地表达你的决议:)另外，仅供参考，目前我有购物车的最小高度要求窗体设置为0，并将UL元素设置为height：auto。只有购物车中只有一件商品，这使得#imageWrapper可以向上移动页面以便可以接受，但这不是一个可行的长期解决方案。

这里是 - 查看购物车，使用主图像下方显示的下拉菜单添加项目。在扩展状态中，您会看到#imageWrapper如何对抗它。

我在下面列出了一些违规的HTML / CSS：

 < div id =main> 
< div id =wpPayPal> 
< / div><！ - 结束wpPayPal  - > 
< div id =breadcrumbs> 
< span class =B_crumbBox>< span class =B_firstCrumb>< a class =B_homeCrumbhref =/>主页< / a>< / span> &安培; RAQUO;< /跨度>< /跨度> 
< / div> <！ - 结束面包屑 - > 
< / div><！ -  end Main  - > 
 
< div id =imageWrapper> 
< div id =imageInnerWrapper> 
< div id =featureImage> 
< div class =filename>< h1>〜& nbsp; Bryce Canyon Sunrise |布莱斯峡谷|犹他州&安培; NBSP;〜< / H1> 
< / div><！ - 结束文件名 - >

etc ...

  #main {
 display：inline; 
职位：亲属; 
 z-index：0; 
} 
 
 #imageWrapper {
 clear：both; 
 width：840px; 
 margin：0 auto; 
 padding：0; 
职位：亲属; 
 z-index：100; 
} 
 
 #imageInnerWrapper {
 width：840px; 
 margin：0 auto; 
 padding：0; 
职位：亲属; 
 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; 
} 
 
 / *覆盖默认的迷你车款式* / 
 
 #wpBody #PPMiniCart表格{
 position：relative; 
 right：auto; 
 width：auto; 
 min-height：0; 
} 
 
 #wpBody #PPMiniCart form ul {
 height：auto;

解决方案

简单的小提琴：Just CSS

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

 .over {background：rgba（230，6，6，.5）; float：right; height：460px; margin-top：-500px; margin-right：159px;溢出：可见;位置：相对; width：560px;颜色：#FFFFFF; / *仅供看起来* / z-index：1000; padding：20px / *仅用于查找* /}。over span {position：relative; / *只是看起来* / top：15px; / *仅用于外观* /}。this {width：560px; height：460px;颜色：#FFFFFF; / *仅供看起来* / padding：20px; / *仅供看起来* / background-image：url（http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg）; / *仅用于外观* /}

< div class =this>要在下< / div>< div class =over>< span> ..或不要< / span>< / div>

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

解决方案

Simple fiddle: Just CSS

Some guy posted another but it had a bunch of extra unnecessary code and some JSAnother 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/

这篇关于无绝对位置覆盖Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！