Question

我有一些盒子，我希望它们并排。我使用float:left;margin-left:10px;并成功实现了我的目标。

但是我想锁定他们在屏幕上的位置，即将w.r.t固定到屏幕上并且根据鼠标没有移动。为此，我尝试使用`position：fixed'，它也有效，但现在它产生了一个问题。

问题在于这两个盒子现在彼此重叠并且随着它们的位置而移位。

她是 fiddle

.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;
}

Answer 1

您可以将fixed属性设置为parent div。试试这个小提琴。

<强> CSS

.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="chatWindow-parent">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</div>

http://jsfiddle.net/2csBx/

Answer 2

您必须拥有2个不同的课程。否则，通过固定位置，告诉他们将其固定在同一位置。

需要添加父类

<强> HTML

<div class="chatContainer">
    <div class="chatWindow"></div>
    <div class="chatWindow"></div>
</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;
}

试试这个小提琴：http://jsfiddle.net/ETwEF/2/

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

2 个答案: