Html 没有绝对位置的覆盖 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18027751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay Divs Without Absolute Position
提问by jivers
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).
我（有点绝望，完全没有成功）试图在不使用绝对定位的情况下覆盖 div。需求源于我通过 Javascript 放置在网站上的 Paypal 购物车。购物车的自然位置很难靠在网页的上边缘（不是它的包含 div，即#wpPayPal，或此 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...
该脚本的作者强烈建议不要自定义购物车的样式表，但我发现他编写的教程可以将购物车插入占位符 div，并附有工作容器的定位说明 - 我能够将购物车定位在网站顶部横幅下方部分。然而...
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.
购物车的 HTML 表单和每个中的 ul 元素在购物车的样式表中都有高度要求，这会将页面的主要内容（由容器 div #imageWrapper包装）推到页面下方太远而无法接受。
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.
我试图将#imageWrapper 置于#main 之上，并使用从本网站上的帖子中收集的几个想法，但没有成功。我已经尝试在#imageWrapper 上进行绝对定位，但这可以使页脚自由浮动在下方。#imageWrapper 的高度是可变的，因此我不想用高度将页脚固定在适当的位置，因为防止重叠的最小高度会将页脚向下推得太远，以容纳网站的大部分内容。
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.
我还尝试从购物车表单的 CSS 中拉取 position:relative，但购物车立即浮回网页顶部。保证金、最高保证金等，不能弥补这一点。
I then read an articleon 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.
然后我阅读了一篇关于使用 position:relative 和 z-index 来叠加 div 的文章。也尝试过这个，首先将 z-index: -1 放在 #main（包装贝宝购物车的 div）上，但购物车消失了。也不知道它去哪里了，因为该网站的面包屑导航也由#main 包裹，留在原地。
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.
然后我将 main 的 z-index 设置为 0 并应用 position:relative 到 #imageWrapper 和 z-index:100。购物车重新出现，但仍然保持#imageWrapper 向下。
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.
非常欢迎提出建议。我不是任何想象力的界面人员，只是一个知道如何使用 Google 的人，所以提前感谢您清楚地阐明您的解决方案 :) 另外，仅供参考，目前我对购物车有最小高度要求form 设置为 0，并将其中的 UL 元素设置为 height:auto。购物车中只有一个项目，这允许 #imageWrapper 将页面向上移动到足以被接受的程度，但这不是一个可行的长期解决方案。
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.
这是一个示例页面- 要查看购物车，请使用主图像下方显示的下拉菜单添加项目。在其展开状态下，您将看到 #imageWrapper 如何与它相对。
I've included portions of the offending HTML / CSS below:
我在下面包含了有问题的 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> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</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;
}
回答by Finesse
Div background for a block with a dynamic height can be implemented using flexbox without an absolute positioning:
具有动态高度的块的 Div 背景可以使用没有绝对定位的 flexbox 实现：
/* 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.
大约 99% 的浏览器都支持该解决方案。
回答by Kay Valle Ganev
Simple fiddle: Just CSS
简单的小提琴：只是 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
有些人发布了另一个，但它有一堆额外的不必要的代码和一些 JS 另一个帖子有答案，但遗漏了一些东西
.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>回答by patelarpan
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>回答by Muhammad Umer
Got it!!! :D
知道了！！！:D
Pure Css solution Very Easy. Putthe following.
纯 CSS 解决方案非常简单。把下面的。
#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}
Replacewhatever you have in css #mainwithwhat i have done above.
替换无论你在CSS#main与我做了什么上面。
So removethe following:
所以删除以下内容：
display: inline;
position: relative;
z-index: 0;
Explanation:Main idea here is to float the main element, make it of certain heightso at no point it pushes everything down. But make overflow of it visible. Overflow of content doesn't affect siblingsof main element.
说明：这里的主要思想是浮动主要元素，使其具有一定的高度，因此它不会将所有东西向下推。但要让它的溢出可见。内容溢出不会影响兄弟姐妹的主要元素。
回答by L Daniel Swakman
Figured out an elegant solution for your problem without absolute positioning OR floats using flexbox — main advantage is that both div heights are respected when calculating parent height. Very useful for overlaying text on an image:
为您的问题找到了一个优雅的解决方案，无需绝对定位或使用 flexbox 浮动 - 主要优点是在计算父高度时同时考虑两个 div 高度。对于在图像上叠加文本非常有用：
body {
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
max-width: 500px;
/*border: 1px solid lime;*/
}
.card {
display: flex;
/*border: 1px solid red;*/
overflow: hidden;
}
.box {
position: relative;
min-width: 100%;
width: 100%;
flex-basis: 100%;
flex-grow: 1;
}
.box--image {
z-index: 1;
overflow: hidden;
}
.box--image.box--heightrestricted {
max-height: 300px;
}
.box--text {
z-index: 2;
margin-left: -100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: red;
}
.box--text h3 {
margin: 0;
padding: 1rem;
}<div class="container">
<button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
<br>
<br>
<div class="card">
<div id="imagebox" class="box box--image box--heightrestricted">
<img src="https://placeimg.com/640/640/4" alt="" />
</div>
<div class="box box--text">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
</div>
</div>
</div>回答by Anthony Accioly
None of the previous answers actually help with your requirement, which is to allow PPMiniCartto expand and contract without pushing imageWrapperdown.
之前的答案都没有真正帮助您满足您的要求，即允许PPMiniCart扩展和收缩而不imageWrapper向下推。
The trick here is to give wpPayPala fixed height large enough to hold the contracted version of PPMiniCart(40px will do - this will give the shopping cart enough room, without pushing imageWrappertoo far down).
这里的技巧是提供wpPayPal一个足够大的固定高度以容纳收缩版本的PPMiniCart(40px 就可以了 - 这将为购物车提供足够的空间，而不会imageWrapper向下推得太远)。
#wpPayPal {
height:40px;
}
Then give main(the container that holds wpPayPal) a z-indexgreater than that of imageWrapperso that it overflows over it.
然后给main（容纳 的容器wpPayPal）一个z-index大于 的imageWrapper，使其溢出。
#main {
z-index: 1;
}
#imageWrapper {
z-index: 0;
}
Setting imageWrapperz-index to 100 kind of overdoes it, I would recommend 0 like I did above.
将imageWrapperz-index设置为 100 有点过头了，我会像上面那样推荐 0。
You also need some JavasScript to set overflow: visibleon wpPayPalafter PPMiniCartexpands and remove it before it contracts. Fortunately Mini Cart JSexposes a nice event-driven API that allows custom callbacks. Since you are using jQuery in your webpage let's take advantage of that:
你还需要一些使用JavasScript到集overflow: visible上wpPayPal之后，PPMiniCart膨胀和它收缩之前将其删除。幸运的是Mini Cart JS公开了一个很好的事件驱动 API，允许自定义回调。由于您在网页中使用 jQuery，让我们利用它：
PAYPAL.apps.MiniCart.render({
parent: 'wpPayPal',
events: {
afterShow: function () {
$("#wpPayPal").css("overflow", "visible");
},
onHide: function () {
$("#wpPayPal").css("overflow", "");
}
}
});
Please note the careful choice of afterShowand onHidecallbacks, if you try to do it any different (setting overflow: visiblebefore PPMiniCartexpands or removing it before PPMiniCartcontracts) PPMiniCartwill "float up" during the transition.
请注意回调afterShow和onHide回调的谨慎选择，如果您尝试进行任何不同的操作（overflow: visible在PPMiniCart扩展之前设置或在PPMiniCart收缩之前删除它）PPMiniCart将在过渡期间“浮动”。
Finally, a working fiddleis worth a thousand words.
最后，一个有效的小提琴值一千字。
回答by NSD
Also can use flexbox to make a tabs container without absolute position:
也可以使用 flexbox 制作没有绝对位置的标签容器：
/* 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>