Vote count:
0
In the following HTML I need to display the RED div on top of the YELLOW div.
I am not able to obtain this result using Z-index.
What am I doing wrong?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
/*background: transparent;*/
background: url('../img/sign-bkg.png') no-repeat left top;
width: 1280px;
height: 720px;
overflow: hidden;
}
#viewport {
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 0;
padding: 0;
width: 1280px;
height: 720px;
overflow: hidden;
}
.keyboard-content {
top: 455px !important; /* HACK foce the keyboard down*/
}
.snippet-dialog-overtop {
z-index: 99 !important;
}
.keyboard-content {
position: absolute;
left: 40px;
z-index: 1000;
width: 1200px;
height: 225px;
background: rgba(255, 255, 0, 0.85);
padding: 5px 10px 5px 5px;
font-family: sans-serif;
}
.keyboard-cover {
width: 1280px;
height: 720px;
background: rgba(0,0,0,0.1);
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body {
margin: 0;
padding: 0;
/*background: transparent;*/
background: url('../img/sign-bkg.png') no-repeat left top;
width: 1280px;
height: 720px;
overflow: hidden;
}
#viewport {
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 0;
padding: 0;
width: 1280px;
height: 720px;
overflow: hidden;
}
.keyboard-content {
top: 455px !important; /* HACK foce the keyboard down*/
}
.snippet-dialog-overtop {
z-index: 99 !important;
}
.snippet-dialog {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
z-index: 3;
}
.snippet-dialog-innerbox {
position: absolute;
display: inline;
top: 360px;
left: 0px;
width: 1280px;
height: 300px;
background-color: red;
z-index: 3;
opacity: 1;
color: white;
border-top: 4px solid #343434;
border-bottom: 4px solid #1f1f1f;
}
.snippet-dialog-innerbox h2 {
position: inherit;
top: 40px;
width: inherit;
font-family: raleway-extra-bold, Sans-Serif;
font-size: 32px;
text-transform: uppercase;
color: #e6e6e6;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.snippet-dialog-innerbox p {
position: inherit;
top: 80px;
width: inherit;
font-family: raleway-medium;
font-size: 24px;
color: #e6e6e6;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.snippet-dialog-innerbox > ul li {
top: 220px;
width: 186px;
height: 61px;
background-color: lightblue;
font-family: raleway-extra-bold, Sans-Serif;
font-size: 22px;
text-transform: uppercase;
color: white;
text-align: center;
line-height: 61px;
}
.snippet-dialog-innerbox > ul li.btn-dialog-cancel {
position: absolute;
left: 430px;
color: #A1A1A1;
background: url("../img/dialog-btn-b.png") no-repeat left top;
}
.snippet-dialog-innerbox > ul li.btn-dialog-confirm {
position: absolute;
left: 650px;
background: url("../img/dialog-btn-a.png") no-repeat left top;
}
.snippet-dialog-innerbox > ul li.btn-dialog-cancel.focus {
background: url("../img/dialog-btn-b-focus.png") no-repeat left top;
}
.snippet-dialog-innerbox > ul li.btn-dialog-confirm.focus {
background: url("../img/dialog-btn-a-focus.png") no-repeat left top;
}
.snippet-snippet-dialog-cover {
position: inherit;
top: inherit;
left: inherit;
width: inherit;
height: inherit;
background-color: black;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="viewport">
<div id="snippet-dialog-exit-main" class="snippet-dialog" style="display: none;">
<div class="snippet-dialog-innerbox">
<h2>
Warning
</h2>
<p>
Are you sure you want to exit the application?
</p>
<ul>
<li class="focusable btn-dialog-cancel" data-href="dialog-cancel">
Cancel
</li>
<li class="focusable btn-dialog-confirm" data-href="dialog-confirm">
Confirm
</li>
</ul>
</div>
<div class="snippet-snippet-dialog-cover">
</div>
</div>
<div id="snippet-dialog-exit-sign" class="snippet-dialog" style="display: none;">
<div class="snippet-dialog-innerbox">
<h2>
Warning
</h2>
<p>
Are you sure you want to exit the application?
</p>
<ul>
<li class="focusable btn-dialog-cancel" data-href="dialog-cancel">
Cancel
</li>
<li class="focusable btn-dialog-confirm" data-href="dialog-confirm">
Confirm
</li>
</ul>
</div>
<div class="snippet-snippet-dialog-cover">
</div>
</div>
<div id="debug-icon">
</div>
<div id="snippet-pop-menu-overtop" class="snippet-dialog snippet-dialog-overtop">
<div class="snippet-dialog-innerbox">
<h2>
Warning
</h2>
<p><br>xxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="snippet-snippet-dialog-cover">
</div>
</div>
</div>
<div class="keyboard-cover" style="">
</div>
<div class="keyboard-content" style="top: 410px">
</div>
</body></html>
asked 1 min ago
Issue in positioning one div on top of another
Aucun commentaire:
Enregistrer un commentaire