除了 iPad 上的 Safari 浏览器，白色 X 出现在我所有浏览器的灰色框中。是我弄错了还是 Safari？
The white X appears in the grey box on all browsers I have but Safari on iPad. Did I make a mistake or Safari?
在 Ipad 的 Safari 上，白色 X 出现在黑色的右侧部分。这是我唯一拥有的 Safari，尽管不确定是 iPad 问题还是 Safari 问题还是我的问题。
https://jsfiddle.net/juvpxa8q/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>title</title>
</head>
<body>
<div id="main">
<div id="piece-info-container">
<div id="piece-info">
<div id="piece-info-top">
<div class="piece-info-row">
<i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
将 position: relative 添加到 #piece-info-container。
这与children的位置重置有关。
老实说，最好从头开始重新考虑您的 CSS，因为 position:absolute 在 sticky 内部，在 fixed 内部是麻烦的秘诀。
将图标放置在右上角是很常见的...看看 Bootstrap's modals 是一个不错的起点。查看 .modal-header 分隔并使用 float 将 x 定位到右侧。
在 Ipad 的 Safari 上，白色 X 出现在黑色的右侧部分。这是我唯一拥有的 Safari，尽管不确定是 iPad 问题还是 Safari 问题还是我的问题。
https://jsfiddle.net/juvpxa8q/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>title</title>
</head>
<body>
<div id="main">
<div id="piece-info-container">
<div id="piece-info">
<div id="piece-info-top">
<div class="piece-info-row">
<i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
将 position: relative 添加到 #piece-info-container。
这与children的位置重置有关。
老实说，最好从头开始重新考虑您的 CSS，因为 position:absolute 在 sticky 内部，在 fixed 内部是麻烦的秘诀。
将图标放置在右上角是很常见的...看看 Bootstrap's modals 是一个不错的起点。查看 .modal-header 分隔并使用 float 将 x 定位到右侧。