Search code examples
csspositioning

Position of a confirmBox

I was using absolute inside relative positioning in order to position the confirmBox. Since the page consists of a lot of content, the height of the page is very large. The confirmBox is positioned in the center of the page, but not in the center of the screen. Since the confirmBox can be opened at several points through several links on the web page, positioning of confirmBox in the center of the screen ( and not in the center of the page ) is required. How can I achieve that?

CSS

#confirmBox {
background:#fff;
border:1px solid #80686f;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px #766A65;
 -moz-box-shadow:0 8px 6px -6px #766A65;
box-shadow: 0 8px 6px -6px #766A65;
font-size:15px;
height:217px;
position:absolute;
text-align:center;
z-index:109;
width:400px;
top:50%;
left:50%;
margin-top:-108px;
margin-left:-200px;
}

HTML

<div style="position:relative">
<div id="confirmBox">
</div>
</div>
Solution

  • try using "fixed" instead of absolute