Question

我正在使用bootstrap，我想在另一个div后面有一个div，所以使用了z-index en position：absolute和relative。

当这样做时，div下的每个div都有z-index：1落后于这个div，而我希望它留在它下面。

当使用100％

时，div也会比最大宽度宽

<div class="row" id="MENUROW">
    <div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
    <div class="col-md-12" id="MAINCOLUMN">
    </div>
</div>

CSS：

#MENUROW

    {
    position: relative;
    height: 80px;
    background-color: transparent;
    z-index: 2;
    }

#MAINROW 

    {
    position: absolute;
    z-index: 1;
    top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
    width: 100%;
    background-image: url(../images/background.jpg);
    background-size: cover;
    }

执行此操作时，背景图像比父div的宽度更宽（向右）。

https://jsfiddle.net/2cs60vrr/3/示例，只是将背景设为红色以显示它应该有多宽，背景图像变得更宽

Answer 1

第1点

您未在.container中使用HTML课程。 Bootstrap有一个结构来获得它的最大功能。您必须使用.container。 Bootstrap结构如下：

<div class="container">
    <div class="row">
        <div class="col-*-*">
            Your Content
        </div>
    </div>
</div>

按上述方式制作html以解决此问题。

第2点

如果您不想更改您的html，请使用以下代码与任何.row解决此问题。

margin-left:0;
margin-right:0;

Answer 2

如果我们不确定你在寻找什么，我很抱歉，那就是你想要的吗？

.grid {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    background-color: #fff;
}

.row {
    width: 100%;
    margin-bottom: 0px;
    display: flex;
}

#MENUROW {
  position: absolute;
  height: 80px;
  background-color: red;
  z-index: 2;  
}

#MAINROW {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  max-width: 1400px;
  background-image:    url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
  background-size: cover;
}

https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/

Answer 3

你应该将包装物放在整个物体的位置：相对; 并且两行都是位置：绝对;

就是这样。

使用position：absolute;该块转到最近的父html标记的绝对左上角，该标记的位置为：relative;。如果没有父母的职位：亲属;您的绝对定位项目会转到屏幕的左上角。

（第一行不是第二行的父级，但它们是兄弟姐妹。包装器“grid”是2行的父级）

<div class="grid">
  <div class="row" id="MENUROW">
    <div class="col-md-12" id="MENUCOLUMN">
      <h1>SHOP</h1>
    </div>
  </div>
  <div class="row" id="MAINROW">
    <div class="col-md-12" id="MAINCOLUMN">
       text
    </div>
  </div>
</div>

和CSS

 .grid {
    position: relative;
 }

.row {
    width: 100%;
}

#MENUROW {
  position: absolute;
  background-color: red;
  z-index: 1;
}

#MAINROW {
  position: absolute;
  z-index: 2;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
  background-size: cover;
}

这是您更新的示例： https://jsfiddle.net/2cs60vrr/6/

Bootstrap行背景图像变得比父网格宽度更宽

3 个答案: