对话框元素内部的元素在对话框边界之外时不会显示

Question

问题

想要创建一个对话框元素，其中有一个

按钮来关闭右上角的

<dialog>

。我想我可以使用绝对位置/变换来完成它，但是当

按钮到达边界之外时，其位于父级

<dialog>

之外的部分不可见。

const openDialog = document.querySelector("#open-dialog")
const closeDialog = document.querySelector("#close-dialog")
const dialog = document.querySelector("dialog")

openDialog.addEventListener("click", () => {
  dialog.showModal();
})
closeDialog.addEventListener("click", () => {
  dialog.close();
})

html {
  height: 100%;
  width: 100%;
}

dialog {
  position: relative;
  height: 50px;
}

#close-dialog {
  position: absolute;
  background-color: pink;
  top: -10px;
  z-index: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button id="open-dialog">Open dialog</button>
  <dialog>
    <buton id="close-dialog">x</buton>
  </dialog>
  <script src="script.js"></script>
</body>

</html>

结果

当我添加

top: -10px

时，它会将

#close-dialog

按钮向上移动，现在实际上只能看到它的一部分。另一部分完全隐藏。

尝试过：

使用
```
z-index
```
，没用
使用
```
transform: translateY()
```
，没用

预期：

```
#close-dialog
```
不应该被隐藏

Answer 1

你可以使用ovrflow:visible，像这样

html {
    height: 100%;
    width: 100%;
  }
  
  dialog {
    position: relative;
    height: 50px;
    padding: -50px;
    overflow: visible;
  }
  
  #close-dialog {
    position: absolute;
    background-color: pink;
    top: -10px;
    z-index: 1;
  }

    <button id="open-dialog">Open dialog</button>
    <dialog>
      <buton id="close-dialog">x</buton>
    </dialog>

对话框元素内部的元素在对话框边界之外时不会显示

问题描述投票：0回答：1

问题

结果

1个回答

最新问题

对话框元素内部的元素在对话框边界之外时不会显示

问题描述 投票：0回答：1

问题

结果

1个回答

最新问题

问题描述投票：0回答：1