css - 获取一个容器 div 覆盖另一个(bootstrap)

标签 css twitter-bootstrap

Okej,所以我试图在 Bootstrap 中将一个 div 容器覆盖在另一个之上。

这是html代码:

<div class="container-fluid">

</div>
<div class="container">

</div>

这是我目前得到的 CSS:

.container-fluid{
    height: 400px;
    background: black; 
    z-index: -10;
}

.container{
    height: 800px;
    background-color: blue;
    z-index: 20;
}

所以我想要的是让 .container 位于 .container-fluid 之上。有没有一种简单的方法可以做到这一点,或者有人知道更好的方法吗? container-fluid 假设包含一个图像,该图像将成为 future 的页眉,而容器将成为站点内容。 我希望容器在容器流体之上的原因是,我在开头写的文本将显示在标题上,并在屏幕尺寸变小时保持良好的位置。

谢谢!

最佳答案

使用:

position:absolute;
top:0;

为您的容器并将两个 div 包装到另一个具有 position:relative 的 div 中。 (或添加position:relative于两个 div 共享的父级)

像这样:http://jsfiddle.net/0p8s1omp/

关于css - 获取一个容器 div 覆盖另一个(bootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26218013/

相关文章:

iphone - 如果您的 CSS 布局在 iPhone 移动版 Safari 中困惑,典型的原因是什么?

javascript - 在HTML幻灯片中使用jQuery触发音频播放吗?

css - 在鹈鹕 Octopus 主题中禁用侧边栏

html - 在 Agency-Bootstrap 4 主题中居中导航栏

html - Bootstrap 3 : make panel's text wrap under icons

javascript - 在选择单选按钮时显示文本框/按钮

html - Shopify - 页脚菜单 (divs) 在移动设备上不在彼此下方?

html - css 中.class 元素和element.class 的区别?

javascript - DIV的onclick中的alert()点击后不显示

css - ExtJS 4 - 失焦时的网格列编辑器边框样式