CODEWITHSUNDEEP
htmlcssoverlaycss-position
jFasaJr
jFasaJr

Reputation: 487

Positioning a div inside of an overlay

Trying to create a contact form in an overlay. I have the overlay div working, but it only works if I set it to "position: absolute". The div inside of the overlay, will not position properly, regardless of what I try.

Need the "form-wrap to be centered vertically & horizontally.

<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;
}

Upvotes: 2

Views: 343

Answers (2)

Ashley Medway
Ashley Medway

Reputation: 7301

This will only work if the height of your overlay is greater than 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

Upvotes: 0

Pete
Pete

Reputation: 58422

try this:

#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

Upvotes: 2

Related Questions