user1032531 user1032531 - 7 months ago 30
HTML Question

How do I stack under an element which has a z-index of auto?

For the below script, how do I position

<div id="blocker">
beneath
<div id="mceu_13" class="mce-tinymce mce-container mce-panel">
without setting the
z-index
of
#mceu_13
? As seen, the
z-indez
of
#mceu_13
is
auto
.

http://jsbin.com/bujixoyoga

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQueryUI Dialog Overlay</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<style type="text/css">
#blocker{margin: 0; padding: 0; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0); opacity: 0.4; position: absolute;}
#dialog{position: relative;}
</style>
<script type="text/javascript">
tinymce.init({
selector: '#editor',
setup: function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$(function(){
$('#edit').click(function() {
var dialog=$("#dialog").parent().append($('<div>',{id:'blocker'}));
console.log(dialog,$(this).next(),$(this).next().css('z-index'))
//$(this).next().css('z-index',parseInt(dialog.css('zIndex'), 10)+1)
tinymce.get('editor').show();
});
$("#open").click(function(){$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
resizable : false,
height : 400,
width : 400,
modal : true,
open : function() {
$('#editor').html('Some data obtained from the DB.');
}
});
});

</script>
</head>
<body>
<button id='open'>Open</button>
<div id="dialog" title="dialog title">
<a href="javascript:void(0)" id="edit">Edit</a>
<div id="editor"></div>
</div>
</body>
</html>

Answer

Give it a negative z-index:

#blocker {
z-index: -1;
}