ребенок div получает перекрытие

Question

У меня есть 2 divs, расположенных рядом друг с другом. Сначала div получает фиксированную ширину 260 пикселей, а второй div занимает оставшуюся ширину. (Смотри ниже структуры)

+------------+------------------------------+ 
|width=260px | Takes Up Remaining width | 
| [div A] |   [div B]    | 
|   |        | 
|   |        | 
|   |        | 
|   |        | 
+------------+------------------------------+ 

DIV А имеет дочерние дивы, которые условно видны и которые больше по ширине (500px). Эти дочерние div частично перекрываются 'div B'.

У меня нет подсказки, как избежать детей див из Перемещения перекрывается сОн В.

Примечания: играл немного с Z индексом, но не помогает.

Пожалуйста, предложите какое-либо решение.

EDIT: Ниже приведен фрагмент кода.

<div id="DIV-A" style="position: absolute; width: 260px; overflow: auto; box-sizing: border-box;> 
    <div id="childDiv" style="position: absolute; width: 500px; 150px ;z-index:1000> 

    </div> 

</div>  

<div id="DIV-B" style="position: absolute; left: 260px; width: 1420px; box-sizing: border-box;"></div> 

Answer 1

Может быть, вы должны играть немного с «позицией: абсолютной» и «положением: относительным» как CSS-атрибуты для childelement.

Объяснение: Детский элемент can not имеет большую ширину, чем его родительский элемент, если он находится в «потоке». С атрибутом «position» вы можете вывести его из нормального «потока», чтобы он мог быть шире.

http://codepen.io/anon/pen/NqXYKb

#child { 
    width: 500px; 
    height: 100px; 
    display: inline-block; 
    background-color: yellow; 
    position: relative; 
} 

Answer 2

CSS часть

#div_a 
    { 
     background-color:Green; 
     position:relative; 
     width:260px; 
     height:500px; 
     float:left; 
    } 
    #div_b 
    { 

     background-color:Gray; 
     height:500px; 


    } 

    .div_a_child 
    { 

     width:500px; 
     position:absolute; 

     background-color:Black; 
     height:300px; 
     color:White; 
    } 

и HTML-теги

<div id=div_a> 

    <div class=div_a_child> 
     Child of Div A 
    </div> 

</div> 

<div id=div_b> 

</div> 

Это делается перед редактированием вопрос !!

Только что видел ваши обновления в вопросе !!

Не используйте «Абсолютное» положение для div! , если вы действительно хотите использовать, поместите его в div с положением «relative» Изменения, внесенные в ваш код ниже!

<div id="DIV-A" style="position:relative; width:260px; height:500px; background-color:Yellow;float:left;"> 
     <div id="childDiv" style="position:absolute; width:500px; height:300px; background-color:Green;"> 

     </div> 

</div>  

<div id="DIV-B" style=" background-color:Silver; height:500px; "> 

</div> 

И, пожалуйста, избегайте встроенных CSS! размещать коды CSS в отдельном файле!

Надеюсь, это было полезно! Счастливое кодирование! :)