菜单项，以及不同类型（div、button）在弹出对话框的顶部弹出。只有菜单项被刺穿，其他所有内容都“位于”弹出窗口下：
你甚至可以选择它们：
dialog {
background: rgba(255, 255, 255, 0.7);
width: 300px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
nav {
width: 100%;
margin: 0;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu>li {
display: inline-block;
margin-right: 20px;
position: relative;
}
.topmenu>li:last-child {
margin-right: 0;
}
.topmenu button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0.5s linear;
font-family: "Times New Roman";
font-size: 16;
}
.topmenu button:hover {
background-color: #ddd;
}
.topmenu div {
display: block;
float: left;
padding: 10px 10px;
text-decoration: none;
outline: none;
transition: .5s linear;
}
.topmenu div:hover {
background-color: #ddd;
}
.fa {
color: inherit;
padding-left: 10px;
}
.submenu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.submenu button {
width: 100%
}
.menu-bar ul {
background: #f1f1f1;
}
.menu-bar ul a {
color: #000000;
}
.menu-bar .submenu {
display: none;
background: #c0c0c0;
}
.menu-bar ul li:hover .submenu {
display: block;
}<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>dialog</title></head>
<body>
<dialog>
<p>Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете».</p>
<p><input type="text" name="some_text" id="some_text"></p>
<p><button onclick="document.querySelector('dialog').close();">Закрыть окно</button></p>
</dialog>
<nav class="menu-bar">
<p style="color: green">Некоторый текст</p>
<ul class="topmenu">
<li><button onclick="document.querySelector('dialog').show();">Окно</button></li>
<li><div>Меню1</div><ul class="submenu">
<li><button type="submit" name="do_create">Пункт002</button></li>
<li><button type="submit" name="do_paint">Пункт003</button></li>
</ul></li>
<li><div>Меню2</div><ul class="submenu">
<li><button type='button'>Пункт004</button><li>
<li><button type='button'>Пункт005</button><li>
<li><button type='button'>Пункт006</button><li>
<li><button type='button'>Пункт007</button><li>
</ul></li>
<li><button type="submit" name="do_export">МенюN</button></li>
<li><div>Меню3</div><ul class="submenu">
<li><button type="submit" name="do_show">Пункт1</button></li>
<li><button type="submit" name="do_show">Пункт2</button></li>
<li><button type="submit" name="do_show">Пункт3</button></li>
<li><button type="submit" name="do_show">Пункт4</button></li>
</ul></li>
<li><div>Меню4</div><ul class="submenu">
<li><button type="submit" name="do_show">Пункт01</button></li>
<li><button type="submit" name="do_show">Пункт02</button></li>
<li><button type="submit" name="do_show">Пункт03</button></li>
<li><button type="submit" name="do_tune">Пункт04</button></li>
</ul></li>
<li><button>Меню5</button></li>
<li><button>Меню6</button></li>
</ul>
</nav>
</body>
</html>如何解决，如果可能的话，使对话框弹出时，它下面的所有内容都被阻止，即页面上的所有内容，除了弹出窗口？
将 z-index 设置为更大的窗口。例如：
z-index: 9999;像这样的东西我明白你想要什么（点击模态窗口出现）：
我了解该标签用于此窗口
dialog，如果是，则添加 CSS 属性z-index: 9999;阅读更多：z-index | htmlbook.ru