对于下面的脚本，我该如何定位 <div id="blocker">下面<div id="mceu_13" class="mce-tinymce mce-container mce-panel">不设置 z-index的 #mceu_13 ？如图所示，z-indez的 #mceu_13是auto .
<!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>
最佳答案
给它一个负的 z-index:
#blocker {
z-index: -1;
}
关于javascript - 如何在 z-index 为 auto 的元素下堆叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37090844/