実行時にdivボディをhtmlボディに追加すると、互いに重なり合っています

Question

Here is the working plunker which is almost implemented。問題は、チャットのdivが$compileを使用して、実行時にボディに追加取得しているが、それらは同じCSSクラスを継承し、そう、互いに重複していること、すなわち：

.chat-window{ 
      bottom:0; 
      position:fixed; 
      float:right; 
      margin-left:10px; 
    } 

何CSS私がするように、追加する必要があります彼らお互いに重なり合うのではなく横に開きます。

リトルヘルプ

Answer 1

箱数を計算this plunkerを試してみて、それに応じて位置

var setPixel = function (chatWindowNumber) { 
      if (chatWindowNumber > 0) { 
       return (chatWindowNumber * 410) + 'px'; 
      } else { 
       return 0; 
    } 

    }; 

を提供し、以下のように追加します。あなたは答えに私を打つ

angular.element(document.getElementById('main-html-body')).append(
     $compile("<div chat-box \n\ 
        id=" + scope.user + "\n\ 
        class='row chat-window col-xs-5 col-md-3' \n\ 
         incoming-msg='incomingMsg' \n\ 
         open-chat-user-list='openChatUserList' \n\ 
          user='user' \n\ 
          count='count' style='position: fixed;bottom:0; right: " + setPixel(scope.count.p) + "'></div>" 
     )(scope) 
) 

Answer 2

はたぶん、チャットウィンドウのラッパーを追加し、その後、チャットウィンドウのdivの自分自身をフロート位置を固定してください？ （未テスト）のようなもの：

1.固定ラッパー浮動お子様連れの

HTML

<div class="chat-wrapper"> 
    <div class="chat-window"></div> 
    <div class="chat-window"></div> 
    <div class="chat-window"></div> 
</div> 

CSS

.chat-wrapper { 
    position: fixed; 
    bottom: 0; 
} 

.chat-window { 
    position: relative; 
    float: left; 
    margin-left: 10px; 
} 

2.フレキシボックスソリューション

CSS

.chat-wrapper { 
    position: fixed; 
    bottom: 0; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
}