Question

我想在HTML中向窗口添加一个关闭按钮，我希望按钮在winodw上漂浮，如下例所示：http://sandbox.scriptiny.com/tinybox2/（第二个示例）

所以我在我的div代码中添加了HTML谎言：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=ISO-8859-1">
</head>
<body class="din">
    <h1>MyWindow</h1>
    <div id="hello"></div>
    <div id="coucou"></div>
    <img id="close" src="img/close.png" value="Close Window" onclick="closeWindow()"></img>
</body>
</html>

在我的CSS中：

#close {
    position: fixed;
    top: 1em;
    right: 1em;
    cursor: pointer;
    z-index: 1000;
}

按钮出现在右上角的窗口中，但不完全位于顶角。我应该添加什么才能让它正好出现在角落？

Answer 1

它并不完全出现在右上方，因为您已将顶部和右侧样式设置为零以外的其他样式：

#close {
    position: fixed;
    top: 0; /* <--- set to zero, 1em = the inherited font size, which will offset it */
    right: 0;/* <--- set to zero, 1em = the inherited font size, which will offset it */
    cursor: pointer;
    z-index: 1000;
}

Answer 2

改为使用：

top: 0;
right: 0;

Answer 3

您也可以尝试：

#close {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    z-index: 1000;
}

<强> Demo

<强> Full Screen Demo

将元素放在窗口的右上角

3 个答案: