Css 具有浮动的div的固定位置：left属性

我有一些盒子，我想把它们并排放在一起。我使用了

float:left；左边距：10px并成功实现我的目标

但我想锁定他们在屏幕上的位置，即固定w.r.t到屏幕，不根据鼠标移动。为此，我尝试使用“position:fixed”，它也起了作用，但现在它产生了一个问题

问题是这两个盒子现在相互重叠，并且随着位置的变化而移位

她就是那个

.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}

你必须有两个不同的班。否则，通过固定位置，您告诉他们要固定在同一位置

需要添加父类

HTML

<div class="chatContainer">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</div>

<div class="chatWindow-parent">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</div>

试试这个提琴：
你可以将固定属性设置为parent div。试试这个提琴

CSS

body{
    height: 2000px;
}
.chatContainer {
    position: fixed;
    bottom: 10px;
}

.chatWindow {
    display: inline-block;
    position: relative;
    float: left;
    width: 250px;
    height: 280px;
    bottom: 10px;
    margin-left: 10px;
    background: #FAFAFA;
    border-radius: 3px;
    border: 1px solid #7a7a7a;
    z-index: 100000;
}

.chatWindow-parent{
    position: fixed;
}
.chatWindow {
    display: inline-block;
    position: relative;
    width: 250px;
    height: 280px;
    bottom:0;
    background: #FAFAFA;
    margin-left: 10px;
    margin-bottom:10px;
    border-radius: 3px;
    border: 1px solid #7a7a7a;
    z-index: 100000;
}

HTML

<div class="chatContainer">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</div>

<div class="chatWindow-parent">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</div>



如果我有15-20个这样的div怎么办？在我真正的项目中，我确实有。是的！谢谢你的帮助，但是你离@jnsamines:）只有几秒钟的路程了。啊，我知道！我不知道你必须有两个以上：(