У меня есть основная оболочка div с содержимым div и кнопкой. Предполагается, что кнопка находится под содержимым div, но по какой-то причине она перекрывается с ней.Почему кнопка перекрывается с div?

ДИВ содержание имеет CSS:

#groupMembers { 
    position: absolute; 
    height: 50%; 
    width: 90%; 
    left: 5%; 
    overflow: scroll; 
    display: inline-block; 
}

и кнопка имеет:

button { 
    display: inline-block; 
    width: 70%; 
    left: 15%; 
}

Я думал, так как они оба инлайн-блок, что они не будут перекрываться, но по какой-то причине они есть. Я сделал JsFiddle, чтобы показать: http://jsfiddle.net/b5hp6boz/

Может кто-нибудь помочь мне получить кнопку для отображения под содержимым div?

источник

2016-08-20 Bender

все абсолютно позиционируется, используйте относительное позиционирование для того, чтобы элементы оставались относительно друг друга. – Aaron

Это также поможет получить ответы, если вы соедините разметку с минимальным * необходимым кодом. Тем более, что все классы и идентификаторы являются только числовыми. – Scott

Абсолютное позиционирование - это ** очень плохой способ выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Удалить (экстенсивное) использование абсолютного позиционирования .... Измените его на position: relative;, если это необходимо. Но на многих элементах это даже не нужно.

Передвиньте кнопку div до <h4>add members</h4> в HTML-формате, где вам кажется, что хотите.

Затем отрегулируйте поля для #DIV_05 и кнопку.

Fiddle Update или Fiddle Update 2

_{(Обратите внимание, я просто выполнил поиск, чтобы изменить absolute к relative в вашем CSS, затем доводят там.)}

Используя абсолютное позиционирование, так широко вы принуждая элементов в неестественные позиции. Тогда, когда это не сработало, вам остается удивляться, почему. Пусть вещи падают, где они, естественно, хотят упасть. Измените HTML для общего порядка рендеринга, не заставляйте вещи с абсолютным позиционированием.

Использование абсолютного положения наиболее часто используется для регулировки индекса z и создания элементов, не изменяющих позиционирование других элементов. (как глобальное поплавок) Не должно быть возврата для позиционирования всего в любом макете.

источник

2016-08-20 23:09:13 Scott

-2

Попробуйте дать тегу div более высокое значение индекса z.

источник

2016-08-20 22:44:05

Проблемы в коде является то, что вы дали #DIV_5 следующий CSS:

position: absolute;

Давая элемент HTML абсолютной позиции он удаляется из нормального процесса рендеринга, не получая никакого места в документ. Это означает, что это не влияет на положение следующего элемента BUTTON_105. Поэтому кнопка расположена прямо под элементом H4_4 (который является первым элементом, не имеющим абсолютного положения).

Чтобы исправить это, просто удалите заявление position: absolute; за #DIV_5. (Кстати: Вы должны стараться не делать интенсивное использование абсолютного позиционирования, поскольку это может привести к дальнейшим вопросам.)

источник

2016-08-20 22:57:27

Почему кнопка перекрывается с div?

ответ

Fiddle Update или Fiddle Update 2

Смежные вопросы