引導行背景圖像變得比父網格寬度更寬

我正在使用引導程序，我想要一個div在另一個div後面，所以使用z-index en位置：絕對和相對。引導行背景圖像變得比父網格寬度更寬

當這樣做時，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; 
    }

這樣的背景圖像時比寬度變爲更寬（向右）的父分部。

https://jsfiddle.net/2cs60vrr/3/例如，剛纔的紅色背景，以顯示它應該有多寬是，背景圖像會更廣泛

來源

2016-12-12 Steven Spieler

你可以重現你迄今爲止在jsfiddle？ –

難道你不能只將背景圖像放在父容器或包裝，而不必亂搞z-index？ – happymacarts

<！ - 註釋不能在css btw中使用/ *註釋* /改爲 – happymacarts

我很抱歉，如果我們不能確定你在找什麼，但是是你想要的嗎？

.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/

來源

2016-12-12 18:33:08

1點

你沒有在你的HTML使用.container類。 Bootstrap有一個結構來獲得它的最大特徵。您必須使用.container。自舉結構如下：

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

讓你的html如上解決這個問題。

點2

如果你想不改變你的HTML，然後使用此代碼下面任何.row來解決這個問題。

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

來源

2016-12-12 18:47:00

你應該把包裝物放在整個東西的位置：relative; 並將兩行的位置：絕對;

就是這樣。

當使用position：absolute;該塊將轉到最接近的父html標籤的絕對左上角，該標籤具有position：relative ;.如果沒有父母職位：親戚;您的絕對定位項目將轉到屏幕的左上角。

（第一行是不是第二的父，但它們是兄弟姐妹。包裝器「網格」是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/

來源

2016-12-12 19:51:09 Julesezaar

引導行背景圖像變得比父網格寬度更寬

回答

相關問題