我有一些信息弹出窗口
我喜欢弹出窗口右上角的“Actief”一词（总是）
但它不适用于边距或填充。
图像阻止了这个词
这就是我的尝试
<h6 style="color: Green;float: right;/* position: absolute; */z-index: 9999999999999999;margin-top: 0px;display: block;/* margin-bottom: 60px; */">Actief</h6>
我的完整档案： https://jsfiddle.net/oynrwo4c/
答案 0 :(得分：5)
您需要通过添加以下样式来绝对定位：
.popup_body {
position:relative;
}
然后给出h6 position:absolute; top: 0;和right:0;这将确保它始终位于右上角。
Here是指向我的代码建议的更新小提琴的链接。
答案 1 :(得分：1)
您必须使用position: absolute到相同的元素才能根据视口定位自己。
向Actief元素提供以下css：
h6 {
color: Green;
position: absolute;
z-index: 9999999999999999;
margin-top: 0px;
display: block;
right: 0;
top: 0;
}
答案 2 :(得分：1)
简单的解决方案是将以下CSS添加到您的元素中：
h6 {
position: absolute;
right: 20px;
top: 20px;
}
这是一个显示其工作原理的小提琴：https://jsfiddle.net/oynrwo4c/4/
简单地说，上面的CSS告诉浏览器渲染元素h6绝对定位于顶部20px和右边缘20px。绝对定位的元素＆＃34;跳出流程＆＃34;，并且不与其他元素堆叠，这意味着您可以将它们放置在任何您想要的位置。
此外，您应该将元素div＃popup标记为relative：
#popup {
position: relative;
}
这确保h6将被绝对放置，但相对于父级，这意味着你现在也可以在任何你想要的位置移动父弹出窗口，保留h6的正确位置（想象一下你的弹出窗口有可拖动的能力）。 / p>
这是一个小提琴：https://jsfiddle.net/oynrwo4c/7/
但是，我建议尽可能避免使用内联CSS。
以下是一个例子：
http://jsbench.github.io/#a9283bb254143ea63d7c
希望这有帮助。
答案 3 :(得分：1)
<h6 style="color: Green; position: absolute; top: 10px; right: 10px; margin: 0;">Actief</h6>
如您所见，我将位置绝对设置为元素以及'顶部'和'右'属性。您可以更改其值以获得所需的偏移量。
JS小提琴链接：https://jsfiddle.net/La5j71qs/2/
答案 4 :(得分：1)
您需要先为您的html元素使用position: fixed;样式。然后，您可以使用top / left设置像素，百分比或视口来设置您希望的位置和依赖的内容。
示例：Jsfiddle
<h6 style="color: Green; position: fixed; top: 20vh; left: 25vw; height: auto; margin: auto;">Actief</h6>
您可以阅读更多相关信息：css position
答案 5 :(得分：0)
使用绝对位置。我不知道你为什么评论你的代码。
<h6 style="color: Green;float: right; position: absolute; z-index: 9999999999999999;margin-top: 0px;display: block; top: 20px; right: 30px;">Actief</h6>
答案 6 :(得分：0)
更改位置html代码，如
<div id="popup" style="position: fixed; top: 15%; width: 70%; height: auto; margin: auto; z-index: 99999; left: 15%; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 5px; box-shadow: rgb(0, 0, 0) 0px 1px 6px 4px; overflow: hidden; padding: 10px; display: block;">
<div class="popup_body" style=" height auto;">
<img src="http://www.ozmo.nl/images/logo.svg" width="150" style="float: center;">
<h6 style="color: Green;float: right;/* position: absolute; */z-index: 9999999999999999;margin-top: 0px;display: block;/* margin-bottom: 60px; */">Actief</h6>
<h4></h4>
<table>
<tbody>
<tr>
<td>
<h4 style="margin-top: 10px;"><u>We hebben een storing, we doen er alles aan om het op te lossen!</u></h4>
</td>
<td style=" width 4%; vertical-align top;"></td>
</tr>
<tr>
<td>08:56<h6> Momenteel kampen wij met een storing, we zoeken nog naar het probleempje</h6><br></td>
<td></td>
</tr>
<tr>
<td><h4 style="margin-top: 10px;"><u>We have a storing, we do everything to fix it!</u></h4></td>
<td></td>
</tr>
<tr>
<td><h6 style="margin-top: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</h6></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button style="padding: 10px; float: right;" class="close_button" onclick="closePopup()">Sluiten</button>
<button style="padding: 10px; float: right;" class="close_button" onclick="tostoring()">Meer Informatie</button>
</div>
答案 7 :(得分：0)
<div id="popup" style="position: fixed; top: 15%; width: 70%; height: auto; margin: auto; z-index: 99999; left: 15%; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 5px; box-shadow: rgb(0, 0, 0) 0px 1px 6px 4px; overflow: hidden; padding: 10px; display: block;"><div class="popup_body" style=" height: auto;"><img src="http://www.ozmo.nl/images/logo.svg" width="150" style="float: center;"><h6 style="color: Green;float: right;z-index: 9999999999999999;margin-top: 0px; position: absolute; right: 10px; top: 10px">Actief</h6><table><tbody><tr><td><h4 style="margin-top: 10px;"><u>We hebben een storing, we doen er alles aan om het op te lossen!</u></h4></td><td style=" width: 4%; vertical-align: top;"></td></tr><tr><td>08:56<h6> Momenteel kampen wij met een storing, we zoeken nog naar het probleempje</h6><br></td><td></td></tr><tr><td><h4 style="margin-top: 10px;"><u>We have a storing, we do everything to fix it!</u></h4></td><td></td></tr><tr><td><h6 style="margin-top: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</h6></td><td></td></tr></tbody></table></div><button style="padding: 10px; float: right;" class="close_button" onclick="closePopup()">Sluiten</button><button style="padding: 10px; float: right;" class="close_button" onclick="tostoring()">Meer Informatie</button></div>
答案 8 :(得分：0)
删除z-index和position: absolute;
试试这个
<h6 style="color: Green;float: right;margin-top: 0px;display: block;margin-right: 25px;" />
答案 9 :(得分：0)
<div id="popup" style="position: fixed; top: 15%; width: 70%; height: auto; margin: auto; z-index: 99999; left: 15%; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 5px; box-shadow: rgb(0, 0, 0) 0px 1px 6px 4px; overflow: hidden; padding: 10px; display: block;"><div class="popup_body" style=" height: auto;"><img src="http://www.ozmo.nl/images/logo.svg" width="150" style="float: center;"><h6 style="color: Green;float: right;/* position: absolute; */z-index: 9999999999999999;margin-top: 0px;display: block;/* margin-bottom: 60px; */">Actief</h6><table><tbody><tr><td><h4 style="margin-top: 10px;"><u>We hebben een storing, we doen er alles aan om het op te lossen!</u></h4></td><td style=" width: 4%; vertical-align: top;"></td></tr><tr><td>08:56<h6> Momenteel kampen wij met een storing, we zoeken nog naar het probleempje</h6><br></td><td></td></tr><tr><td><h4 style="margin-top: 10px;"><u>We have a storing, we do everything to fix it!</u></h4></td><td></td></tr><tr><td><h6 style="margin-top: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</h6></td><td></td></tr></tbody></table></div><button style="padding: 10px; float: right;" class="close_button" onclick="closePopup()">Sluiten</button><button style="padding: 10px; float: right;" class="close_button" onclick="tostoring()">Meer Informatie</button></div>
答案 10 :(得分：-1)
h6 span{
position:absolute;
top:5px;
right:5px;
}<div id="popup" style="position: fixed; top: 15%; width: 70%; height: auto; margin: auto; z-index: 99999; left: 15%; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 5px; box-shadow: rgb(0, 0, 0) 0px 1px 6px 4px; overflow: hidden; padding: 10px; display: block;"><div class="popup_body" style=" height: auto;"><img src="http://www.ozmo.nl/images/logo.svg" width="150" style="float: center;"><h4></h4><h6 style="color: Green;float: right;/* position: absolute; */z-index: 9999999999999999;margin-top: 0px;display: block;/* margin-bottom: 60px; */"><span>Actief</span></h6><table><tbody><tr><td><h4 style="margin-top: 10px;"><u>We hebben een storing, we doen er alles aan om het op te lossen!</u></h4></td><td style=" width: 4%; vertical-align: top;"></td></tr><tr><td>08:56<h6> Momenteel kampen wij met een storing, we zoeken nog naar het probleempje</h6><br></td><td></td></tr><tr><td><h4 style="margin-top: 10px;"><u>We have a storing, we do everything to fix it!</u></h4></td><td></td></tr><tr><td><h6 style="margin-top: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</h6></td><td></td></tr></tbody></table></div><button style="padding: 10px; float: right;" class="close_button" onclick="closePopup()">Sluiten</button><button style="padding: 10px; float: right;" class="close_button" onclick="tostoring()">Meer Informatie</button></div>
希望这有帮助。