html – 没有绝对位置的覆盖Div

以下是一个很长的解释,但它是有效沟通我正在解决的问题的唯一方法…

我(有点绝望,完全不成功)试图覆盖div而不使用绝对定位.这个需求来源于我通过Javascript放在网站上的paypal购物车.购物车的自然位置很难抵挡网页的上边缘(不包含div,即#wpPayPal,或该div的包装,#main).

该脚本的作者强烈建议不要自定义购物车的样式表,但是我发现他写了一个教程,可以将购物车插入到占位符div中,并且可以将容器的定位说明工作 – 我可以将购物车放在网站的顶部横幅下方部分.然而…

购物车的HTML表单和一个ul元素在购物车的样式表中具有高度要求,并且将页面的主要内容(由容器div #imageWrapper包装)推送到页面以下可以接受.

我试图将#imageWrapper放在#main上,并收集了来自本网站上的帖子的几个想法,没有成功.我已经在#imageWrapper上尝试过绝对定位,但这样可以让页脚浮动在下面. #imageWrapper的高度是可变的,因此我不想将页脚固定在高度的位置,因为防止重叠的最小高度会将页脚下推到太多的网站内容.

我也尝试拉动位置：相对于购物车窗体的CSS,但是购物车会立即浮动回到网页的顶部.保证金,顶点等不能补救这一点.

然后我读了一个 article使用position：relative和z-index来覆盖div.也试过这个,首先将z-index：-1放在#main(包裹paypal购物车的div)上,但是该购物车会消失.不知道它在哪里,因为该网站的面包屑导航,也被#main包裹住了.

然后我将z-index设置为0和应用位置：相对于#imageWrapper,z-index为100.购物车重新出现,但仍然保留#imageWrapper.

建议受到极大欢迎.我不是任何想象力的接口人,只是一个知道如何使用谷歌的人,所以提前感谢您明确阐述您的分辨率:)另外,FYI,目前我有最低要求的购物车表单设置为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;
}

解决方法

简单的小提琴：只是CSS

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

.over {
  background: rgba(230,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/

html – 没有绝对位置的覆盖Div

解决方法

相关推荐