CSS“右”属性的行为不符合预期

Question

我正在编写聊天应用程序的UI。我有一个消息列表，根据发件人是自己的用户还是其他用户，以不同的方式设置样式。

问题在于，当我为消息（其right属性设置为position）设置relative属性时，该元素似乎采用与{相同的参考点{1}}。我添加的值越多，元素向左移动的距离越远，但从自身元素的左侧开始。

实际结果如下：

我想要的是“a”消息与右边对齐。

语音气泡的css代码如下：

left

HTML如下：

    .speech {
  display: inline-block;
  position:relative;
  padding:5px;
  margin: 1px 3px;
  border:2px solid #5a8f00;
  color:#333;
  background-color: #df9;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  color: #000;
  font-weight: 600;
}
.speech::before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
.speech.otherown::before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-27.5px; /* value = - border-left-width - border-right-width */
  border-width:3px 10px 3px 15px;
  border-color:transparent #5a8f00;
}
.speech.userown::before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left: auto;
  right: -24.4px; /* value = - border-left-width - border-right-width */
  border-width:3px 10px 3px 12px;
  border-color:transparent #5a8f00;
}
.speech.userown {
  margin-right: 10px;
  right: 0;
}
.speech.otherown {
  margin-left: 10px;
}

整个代码位于http://github.com/dieortin/crowdspeak。

Answer 1

需要将排名设置为absolute或fixed以遵守right属性。

Answer 2

当position:relative的元素具有right样式时，请将其视为代表＆＃34;距离此元素原始右侧位置的像素数应为＆＃34;。 left，top和bottom也是如此 - 参考点是元素的原始位置。因此，向right添加像素会将其向左推，向left添加像素会将其向右推。

如果您希望它的容器右侧为X像素，请尝试使用position:absolute代替。

修改：在这种特定情况下，最好使用float而不是绝对定位。尝试添加以下内容：

.speech {
  clear:both;
}
.speech.userown {
  float:right;
}
.speech.otherown {
  float:left;
}