Lightbox Overlay Положение Absolute работает неправильно

Question

Эй Stackoverflow сообщество,

У меня есть простой скрипт лайтбокса с несколькими изображениями на странице, но это как-то не работает, как это должно быть. Когда я использую , а затем накладывается, он заполняется, и изображение прилипает к вершине, но когда я использую position:absolute, он разрезается на полпути через страницу, и изображение уходит в верхнюю часть.

Должно быть, что-то очень просто, я пропал без вести, не так ли? Может быть, моя структура HTML неверна? Ошибка находится здесь - http://kriskorn.eu/lightbox-error/

Спасибо вам за помощь!
Kris

Answer 1

Кажется, что ответ, который я искал в том, что вы не можете иметь position:absolute без какого-либо кода JavaScript. В конце концов, я использовал position:fixed, потому что это уже работало для меня.

Answer 2

здесь два вопроса

1) вы используете padding-top: 700px; в .main p, которые заставляют изображения, чтобы перейти вниз страницы. и с абсолютной позицией изображения никогда не могут отображаться с наложением. оверлейный div пойдет вверх с прокруткой. Здесь position:fixed может работать. Исход с фиксированной позицией, контент будет двигаться вверх, а наложение останется на фиксированной позиции.

2) вы должны использовать opacity:0.* или любой светлый цвет. Вы используете 0.95, который не отображает содержимое ниже div.

это должно работать, пожалуйста, проверьте

#overlay { 
    background-color: rgba(255,255,255,0.3); 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    text-align: center; 
    /* display: none; */ 

} 

с позиции абсолютного он не будет покрывать всю страницу. это удивительно. Почему вы используете это?

.main p { 
    padding-top: 700px; 

}

это также может быть одним из вариантов.

.main p { 
     padding-top: 10px; 
    } 
#overlay { 
    background-color: rgba(255,255,255,0.3); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    /* display: none; */ 
    text-align: center; 

}