时间戳

首页 > 解决方案 > CSS - 右下角的位置？

css - CSS - 右下角的位置？

问题描述

我如何使这个位置在右下角？

HTML

<div class="info player">
            <div id="job" style="display:none;"><span>Jobname</span></div>
            <div id="status">
                <ul>
                    <li class="icon" id="thirst" style="display:none;"><i class="fas fa-tint"></i><span></span></li>
                    <li class="icon" id="hunger" style="display:none;"><i class="fas fa-utensils"></i><span></span></li>
                    <li class="icon" id="stamina" style="display:none;"><i class="fas fa-running"></i><span></span></li>
                    <li class="icon" id="armor" style="display:none;"><i class="fas fa-shield-alt"></i><span></span></li>
                    <li class="icon" id="health" style="display:none;"><i class="fas fa-heart"></i><span></span></li>
                </ul>
            </div>

CSS

.info { position: absolute; }

.info.server { bottom: 0; right: 0; }
.info.server #server img { max-width: 100%; opacity: 0.75; }

.info.player { bottom: 0; right: 0; text-align: right;}
.info.player #job span { font-size: 20px; color: #FFF; font-weight: 900; text-transform: uppercase; text-shadow: 0px 1px 1px rgba(0,0,0,0.75); }

.info.player #status { clear: both; }
.info.player #status ul { margin: 1px 0 0 0; }
.info.player #status ul li { float: right;}
.info.player #status ul li#health span { background: linear-gradient(180deg, #ff0000 0%, #aa0000 100%); }
.info.player #status ul li#armor span { background: linear-gradient(180deg, #0bcfe6 0%, #0aa3b5 100%); }
.info.player #status ul li#stamina span { background: linear-gradient(180deg, #ffb700 0%, #e0a102 100%); }
.info.player #status ul li#hunger span { background: linear-gradient(180deg, #ff8000 0%, #cd6700 100%); }
.info.player #status ul li#thirst span { background: linear-gradient(180deg, #00c3ff 0%, #008fbb 100%); }
.info.player #status ul li#health.dead { animation: trew-pulse 500ms infinite; }
.info.player #status ul li#health.dead span { height: 0 !important; }
.info.player #status ul li#health.dead i.fas:before { content: '\f714'; }

在我将 .info.server和.info.player更改为右下角后，它们仍然在左上角可见。

标签： css

解决方案

我想你的意思是“这个” <div class="info player">。如果您希望它卡在窗口的右下角（或相对在其他元素内部，从您的代码段中不清楚），只需添加position: absolute; bottom: 0; right: 0;到.info.player选择器并确保没有任何内容覆盖它。

推荐阅读