Issue
I'm going to develop an addon for Firefox, but I have a problem with the design. To explain the situation in the following picture you see a popup which has a darkgrey box in it. This box I animated from top to bottom, so it slow move in the popup. This is a div, and I want that the div is over the white body. So the div is animated in and everything behind is no more visible, but the div has the same width and same height as the body. You can still see the body right and left and on top and at the bottom, but why? How can I do it that the div is over the body design?
The picture: http://prntscr.com/puo44r
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
body {
background-color: white;
width: 385px;
height: 520px;
text-align: center;
}
.kw_popup {
display: none;
background-color: #333;
width: 385px;
height: 520px;
z-index: -1;
}
</style>
<body>
<div class="kw_popup" id="kw_dark">
</div>
</body>
<script src="jquery.min.js"></script>
<script>$(document).ready(function () {
$("#kw_dark").slideDown("slow");
});</script>
</html>
Solution
You can add position: fixed to div.
When element has position: fixed it is removed from flow of the page and it will be above every element of page.
Hope this helps.. Comment down if it doesn't :)
Answered By - Mileta Dulovic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.