在疊加層中定位div

嘗試在疊加層中創建聯繫人表單。我有覆蓋div工作，但它只適用於，如果我把它設置爲「位置：絕對」。無論我嘗試什麼，疊加層內的div都無法正確定位。在疊加層中定位div

需要「的形式，換到垂直居中&水平

<div id="overlay"> 
    <div id="form-wrap"> 
     <img id="close-btn" src="images/framework/close.png"> 
     <form id="form-box"> 
      <input name="first-name" id="first-name" type="text" maxlength="32"> 
     </form> 
    </div> 
</div> 

#overlay{ 
    top: 0; 
    left: 0; 
    height:100%; 
    width: 100%; 
    position: absolute; 
    z-index: 899; 
    display: none; 
    background-color: rgba(0, 0, 0, 0.41); 
} 
#form-wrap{ 
    width: 400px; 
    height: 600px; 
    position: relative; 
    z-index: 900; 
    margin: 0; 
    background-color: white; 
}

來源

2014-01-22 John Fasano

試試這個：

#overlay{ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: fixed; 
    z-index: 899; 
    display: none; 
    background-color: rgba(0, 0, 0, 0.41); 
} 
#form-wrap{ 
    width: 400px; 
    height: 600px; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    margin: -300px 0 0 -200px; 
    background-color: white; 
}

Example

來源

2014-01-22 11:58:51 Pete

我一定會嘗試這個，但作爲一個快速的問題，我可以使用{top：0;底部：0;右：0;左：0;}？如果沒有任何資源將不勝感激。非常感謝。 –

如果你使用它，那麼它將填充容器的100％，給出四個座標而不是兩個將意味着它相對於它的父母被定位和確定大小，而如果你只給出一個x和ay，那麼你將需要給它一個寬度和一個高度 – Pete

這一切都運行到今天，當我意識到如果窗口沒有最大化，表單包裝會更高或更靠左。 –

如果您覆蓋的高度爲這隻會工作大於600px！

#overlay{ 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    z-index: 899; 
    display: none; 
    background-color: rgba(0, 0, 0, 0.41); 
} 
#form-wrap{ 
    width: 400px; 
    height: 600px; 
    top: 50%; 
    position: relative; 
    z-index: 900; 
    margin: -300px auto 0 auto; 
    background-color: white; 
}

Example

來源

2014-01-22 12:02:37

在疊加層中定位div

回答

相關問題