在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。与孩子们的职位重置有关。
老实说，最好重新考虑一下CSS，因为position:absolute内sticky内的fixed会带来麻烦。
[将图标放置在右上角是很普遍的。一个不错的起点可能是看Bootstrap's modals。查看.modal-header分隔，然后使用float将其置于右侧。