Ответ 1

#thumbsList li {
    display: inline-block;
    position: relative;
}

Вы ожидаете такого результата? см. jsFiddle

Ответ 2

Проверьте это: https://jsfiddle.net/r6hho2sL/11/

здесь я внесла некоторые изменения в ваш код:
1. Я использовал JQuery для настройки ширины элемента наложения при событии изменения размера окна, чтобы он сохранял свое отзывчивое поведение.

$( window ).resize(function() {
  $( ".thumbOverlay" ).width($(".forward").width());
});
$( ".thumbOverlay" ).width($(".forward").width());

2. Я использовал (divs и spans) вместо списка (ul и li)

3. Я изменил классы css

   .thumbOverlay {
       top: 0;
       position: absolute;
       z-index: 13111133;
       background-color: black;
       color: white;
       height: 100%;
       display: inline;
   }
   
   #thumbsList span {
   display: inline;
   margin-left: -4px;
   }
   

Ответ 3

Для быстрого просмотра проверьте мою ручку на CODEPEN Отзывчивый диафильм и список папок

Где вы ошибались? Прежде всего, я не собираюсь выбирать вас, я просто честен:

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

Два общих правила:

1) parent-element = > position: relative, child-element = > position: absolute. Оба могут иметь любую ширину/высоту (%, px), но дочерние значения относятся к родительскому элементу.

2) child-element = > position: fixed. Ширина/высота/позиция относительно окна браузера, ВСЕГДА.

Вы смешали два правила и начали работать в кругах. Чтобы освободиться, вы должны сделать:

/* Generally accepted (and working) init of HTML and BODY */
html, body         { width: 100%; height: 100%; margin: 0; padding: 0 }
body               { max-width: 100%; margin: 0 auto }
/* margin: 0 auto will center BODY onscreen if max-width < 100% */


#thumbsList        { position: absolute /* relative to BODY!!! which is a parent */ }

#thumbsList li     { position: relative /* while a child of UL, it is a parent of IMG */ }

#thumbsList li img { position: absolute /* child of LI absolute coords relative to LI */ }

Для #thumbslist не требуется позиция "(только размер, стиль и т.д.). К сожалению, из-за количества (логических) ошибок ваш CSS нуждается в перепроектировании (IMHO, который есть).

UPDATE

Как вы, возможно, уже видели, код работает на Codepen и автономно в последних IE11, FF и CH (все W7, мне все равно нужно проверить мобильный).

То, что я по существу создал, представляет собой полосу сложенных слоев макета flexbox. Когда вы освоите методы flexbox, вы увидите, что у него много преимуществ по сравнению с обычными (встроенными) блочными методами. Недостатки тоже, я укажу их там, где это применимо.

Чтобы легко понять мой рабочий процесс flexbox, я всегда спрашиваю, какой базовый макет нужен:

• столбец строк или строка столбцов
• упаковка или нет
• (часто justify-content: space-between, вы можете прочитать это)

Вложенность и обман придут позже...

Рассекая ваши требования: вам действительно нужна обычная веб-страница, но вместо красиво размещенных блоков вам нужно, чтобы они были сложены, следовательно, необходимость слоев

Ответ 4

Почему это происходит?

Это не проблема с z-index, поскольку .thumbOverlay укладывается поверх изображения. Проблема в том, что .thumbOverlay имеет процент height, что означает, что он займет полный height своего контейнера. В этом случае контейнер представляет собой li, который был настроен как display: inline;, поэтому его высота будет выше, чем в поле строки.

Что вы можете сделать?

Для вашего наложения для работы вам понадобится height: 100%; для вычисления правильного height.

Способ 1. Сделайте элемент списка inline-block

Если вы сделаете li display: inline-block;, вы сможете установить его height.

• Измените display: inline; на display: inline-block; на #thumbsList li
• Добавьте height: 100%; в #thumbsList li, чтобы сделать li height ul
• Измените max-width: 100%; на max-width: calc(100vw - 96px); на #thumbsList li img. Это гарантирует, что img занимает полную ширину окна просмотра, минус border и position ing, примененные к #mainContainer и #thumbsList

html, body {
    min-height: 100%;
    height: 100%;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
#thumbsList {
    height: 76%;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 0px;
    top: 13%;
    left: 80px;
    list-style-type: none;
    top: 13%;
    position: absolute;
}
#thumbsList li {
    /*display: inline;REMOVE THIS*/
    display: inline-block; /*ADD THIS*/
    height: 100%; /*ADD THIS*/
    position: relative;
}
#thumbsList li img {
    /*max-width: 100%; REMOVE THIS*/
    max-width: calc(100vw - 96px); /*ADD THIS*/
    height: 100%;
    transition: all 0.8s ease;
}
.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.backStrip {
    background-color: #2d2d2d;
    border-bottom: 1px solid #1a1a1a;
    height: 35px;
    position: relative;
    z-index: 22;
    position: fixed;
    width: 253px;
    top: 43px;
    height: 79px;
    left: 85px;
}
#infoText {
    color: white;
    font-style: italic;
    padding-top: 10px;
    float: right;
    margin-right: 10px;
    font-family: sans-serif;
    font-size: 12px;
}
#mainContainer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 8px solid #2D2D2D;
    margin: 0px;
    overflow-x: auto;
}
#thumbsButtons {
    list-style: none;
    position: fixed;
    bottom: 6%;
    left: 46%;
    z-index: 22;
}
#counterContainer {
    position: fixed;
    bottom: 5%;
    left: 50%;
    right: 50%;
    font-family: verdana;
    font-weight: bold;
    width: 100px;
}
#thumbsButtons li {
    float: left;
    margin-left: 11px;
    font-size: 16px;
    font-family: verdana;
}
#thumbsButtons li:hover {
    cursor: pointer;
}
#nextArrow {
    position: fixed;
    right: 10px;
    top: 43%;
    z-index: 13333;
    font-size: 100px;
    color: white;
    font-family: helvetica;
    cursor: pointer;
}
#sidelogo {
    position: absolute;
    z-index: 10;
    top: 35%;
    left: 0%;
    width: 67px;
    height: 258px;
    background-color: #2D2D2D;
}
.headerInfo {
    position: absolute;
    bottom: 22px;
    color: white;
    z-index: 333;
    font-family: verdana;
    font-size: 17px;
    text-align: center;
}
.thumbOverlay {
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    /*display: inline; REMOVE THIS*/
}

<div id="mainContainer">
    <div class="backStrip"> 
        <span id="infoText">Written By Banmeet Singh</span>
    </div>
    <ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
    <span id="sidelogo">Thinking Forward</span>
    <ul id="thumbsList">
        <li>
            <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>
        </li>
        <li>
            <div class="thumbOverlay"><span>adasd</span> </div>
            <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
        </li>
        <li>
            <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
        </li>
        <li>
            <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
        </li>
        <li>
            <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
        </li>
        <li>
            <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
        </li>
    </ul>
    <div id="counterContainer">3 of 10</div>
</div>

Ответ 5

Добавьте это.

#thumbsList li {
    display: inline-block;
    position: relative;
    height: 100%;
}

Проблема -

так как li сделан display:inline, он не занимает 100% высоты вашего ul i.e. #thumbsList.

Решение -

После создания li display:inline-block и добавления height:100%, элемент li взял всю высоту ul и thumbOverlay div, которая является дочерним элементом li, также заняла 100% высота.