css - 具有绝对定位的 Div 表现不一致

Question

我对前端方面有点陌生，所以如果我忽略了一些简单的事情，请原谅我。

这是我正在构建的一个 React 应用程序，它将在屏幕上显示多个图标。一个从传感器读取当前温度。我想在右上角显示单位(C 或 F)，在右下角显示传感器读数。

我的 HTML 代码:

<div className='app-icon-temp'>
    <div className='icon-temp-current'>00.00</div>
    <div className='icon-temp-unit'>C</div>
</div>

我的 CSS 代码:

.app-icon-temp {
    width: 115px;
    height: 115px;
    position:relative;
}
.icon-temp-current {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
}
.icon-temp-unit {
    position:absolute;
    top:0;
    right:0;
    padding:10px;
}

第一个 div 位于右下角，但是第二个 div 位于左上角。我需要将此元素移至右上角。

造成这种不一致的原因是什么？

Answer 1

在 HTML (DIV) 标签中，您必须使用“class”，而不是“className”:

.app-icon-temp {
    width: 115px;
    height: 115px;
    position:relative;
    background: #ddd;
}
.icon-temp-current {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
}
.icon-temp-unit {
    position:absolute;
    top:0;
    right:0;
    padding:10px;
}

<div class='app-icon-temp'>
    <div class='icon-temp-current'>00.00</div>
    <div class='icon-temp-unit'>C</div>
</div>