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

概述以下是一个很长的解释,但它是有效沟通我正在解决的问题的唯一方法… 我(有点绝望,完全不成功)试图覆盖div而不使用绝对定位.这个需求来源于我通过Javascript放在网站上的paypal购物车.购物车的自然位置很难抵挡网页的上边缘(不包含div,即#wpPayPal,或该div的包装,#main). 该脚本的作者强烈建议不要自定义购物车的样式表,但是我发现他写了一个教程,可以将购物车插入到占位符 以下是一个很长的解释,但它是有效沟通我正在解决的问题的唯一方法…

我(有点绝望,完全不成功)试图覆盖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 ><span ><a  href="/">home</a></span> &raquo;</span></span>    </div> <!--end breadcrumbs --></div><!-- end Main --><div ID="imageWrapper">    <div ID="imageInnerWrapper">        <div ID="featureImage">            <div ><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 >To BE UNDER</div><div ><span>..or not To BE UNDER</span></div>

http://jsfiddle.net/3WDf7/

总结

以上是内存溢出为你收集整理的html – 没有绝对位置的覆盖Div全部内容，希望文章能够帮你解决html – 没有绝对位置的覆盖Div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。