Здарова!
Такая фигня: написал "галерею" на CSS, но теперь не могу зафиксировать ее - она плавает по сайту!
Да,да,да position: absolute;, но нет..... Не так все просто!
Вот код:
[code]
label[for] {
cursor: pointer;
}
input[type="checkbox"] {
display: none;
}
.lightbox, .grid {
top: 530px;
width: 900px;
left: 210px;
position: absolute;
}
.lightbox {
z-index: 1;
min-height: 100%;
overflow: auto;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .5s ease-out;
transition: transform .5s ease-out;
}
.lightbox img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
input[type="checkbox"]:checked + .lightbox {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
input[type="checkbox"]:checked ~ .grid {
opacity: .25;
}
.grid {
z-index: 0;
height: 100%;
padding: 16px;
overflow: auto;
text-align: center;
-webkit-transition: opacity .75s;
transition: opacity .75s;
}
.grid .grid-item {
display: inline-block;
width: 25%;
padding: 16px;
}
.grid img {
max-width: 100%;
max-height: 100%;
border: 5px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[/code]
Вот скрин:
Добавлено 28.10.16 в 11:20:39:
Скрин!