我正在尝试构建一个尺寸为 26x26 像素的容器，并在此容器的最右下角显示一个数字。此外，我想在容器中添加一张 24x24 的背景图片。
到目前为止，我拥有的代码如下
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
这里有一个JSFiddle链接，让事情变得更容易 https://jsfiddle.net/n8ku715x/
正如你从JSFiddle中看到的，它并不完全有效。它甚至没有设置正确的尺寸。任何帮助，不胜感激。
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>这是您的容器，其中包含数字 - 这就是您要找的吗？
试试这个：
.CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
.HTML
<div class="container">
<div class="container-number">2</div>
</div>
如果你想要固定的，只需将底部 0 和位置添加到类中
.CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}