Html CSS权利属性

我正在尝试使用react制作类似Linkedin的信息覆盖

所以，我试着用底部属性和右属性生成固定div

问题是产权不起作用

我不知道是什么问题

<div id='message-overlay'>
        {chat}
</div>

---

有人知道为什么right属性（在@for中）不起作用吗？

right的值不能是小于单位的数字。您需要将px添加到数字中。

<div className='user-chat'>{e.target.dataset.id}</div>

#message-overlay{
    position: fixed;
    width: 78%;
    right: 0;
    bottom: 0;
    z-index: 100;

    .user-chat{
        position: fixed;
        z-index: 100;
        bottom: 0;
        width: 300px;
        float: right;
        $elements: 7;
        @for $i from 0 to $elements{
            &:nth-child(#{$i + 1}){
                right: 330*($i+1);
                background-color: rgb(($i+1)*30, ($i+1)*30, ($i+1)*30);
            }
        }
    }
}