CSS запас сверху от родственного элемента не родительского

Question

Я получил этот HTML

<div class="ChatDiv"> 
    <div class="chatdiv_ fm"> 
      <span>uhygtfgyhujiuhygt i uytr yui jhuygtfr</span> 
    </div> 
    <div class="chatdiv_ fm" style="margin-top:148;"> 
      <span>t</span> 
    </div> 

<div class="chatdiv_ fm" style="margin-top:214;"> 
         <span>t</span> 
      </div> 
    </div> 

И это CSS

.ChatDiv{ 
    width: 800px; 
    height: 480px; 
    overflow: auto; 
    margin-left: 350px; 
    border-radius: 4px; 
    background: white; 
    margin-top: 80px; 
    position: absolute; 
    box-shadow: 0px 0px 11px black; 
} 
.fm{ 
    position: relative; 
    font-family: Nbutler; 
    font-size: 20px; 
    float: right; 
    background: #2196f3; 
    max-width: 400px; 
    color: white; 
    margin-left: -432px; 
    margin-right: 20px; 
    padding: 10px; 
    border-radius: 5px; 
    span{ 
     display: block; 
     height: auto; 
     width: auto; 
     max-width: 400px;  
    } 
} 

И проблема в том, когда я иметь маржу сверху на fm элементов он принимает этот запас из top.Не от элемента брата и я не так много fm элементов, которые у меня есть, поэтому я не могу разместить тот же крайний край для всех элементов fm.

Answer 1

Приведенный пример где поля рассчитываются от братьев и сестер.

.container{ 
 
\t width: 500px; 
 
\t height: 300px; 
 
\t margin: 16px auto; 
 
\t padding: 16px; 
 
\t 
 
\t border-radius: 6px; 
 
\t border: 1px solid black; 
 
} 
 

 
.list { 
 
\t box-sizing: border-box; 
 
\t padding: 16px; 
 
\t float: right; 
 
\t width: 50%; 
 
\t height: 100%; 
 
\t background-color: tomato; 
 
} 
 
.list__elem { 
 
\t box-sizing: border-box; 
 
\t width: 100%; 
 
\t height: 42px; 
 
\t margin-bottom: 16px; 
 
\t padding-left: 16px; 
 
\t 
 
\t border: 1px solid olive; 
 
\t line-height: 40px; 
 
}

<div class="container"> 
 
\t <ul class="list"> 
 
\t \t <li class="list__elem">Elem 1</li> 
 
\t \t <li class="list__elem">Elem 2</li> 
 
\t \t <li class="list__elem">Elem 3</li> 
 
\t \t <li class="list__elem">Elem 4</li> 
 
\t </ul> 
 
</div>

Я считаю, что встроенные стили маржи и отсутствие элемента группировки делает его трудно понять пример.

удачи;)

Answer 2

Если вы хотите использовать абсолютную позицию, то это будет происходить все время, потому что это будет Div, который имеет положение относительно в качестве границ, и ваши дивы с позиции абсолютного просто " не выходит ".

Нет необходимости использовать position: absolute для этих разделов. Просто удалите поплавок, положение, поля, и вы хорошо пойдете.

jsFiddle: https://jsfiddle.net/sey4121b/