CSS 将容器 div 置于另一个之上(引导程序)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26218013/
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
Getting a container div over another (bootstrap)
提问by Tim Gustavsson
Okej, so im trying to get one div container over another in bootstrap.
Okej,所以我试图在引导程序中将一个 div 容器置于另一个之上。
This is the html code:
这是html代码:
<div class="container-fluid">
</div>
<div class="container">
</div>
And this is the css i got so far:
这是我到目前为止得到的css:
.container-fluid{
height: 400px;
background: black;
z-index: -10;
}
.container{
height: 800px;
background-color: blue;
z-index: 20;
}
So what i want is for the .container to be ontop of the .container-fluid. Is there an easy way of doing this or does anyone know a better method? The container-fluid is suppose to contain an image that will be the page header in the future, while the container will be the site contet. The reason i want the container over the container-fluid is so that the the text i write in the beginning will be displayed on the header and keep a good position as the screen size gets smaller.
所以我想要的是 .container 位于 .container-fluid 之上。有没有一种简单的方法可以做到这一点,或者有人知道更好的方法吗?容器流体假设包含一个图像,它将成为未来的页面标题,而容器将成为站点内容。我想要容器在容器流体上的原因是,我在开头写的文本将显示在标题上,并随着屏幕尺寸变小而保持良好的位置。
Thanks!
谢谢!
回答by Alvaro Menéndez
use:
用:
position:absolute;
top:0;
for your container and wrap both div's into another div with position:relative. (or add position:relative to whatever parent both div's share)
为您的容器并将两个 div 包装到另一个带有 position:relative 的 div 中。(或添加位置:相对于任何父 div 的份额)
as this: http://jsfiddle.net/0p8s1omp/