При нажатии в галерее все смещается "вверх"

@dream.reckless · Регистрация: 04.12.2011

Студворк — интернет-сервис помощи студентам

Не знаю что уже делать.
Есть простая галерея. Ну очень простая. И все бы хорошо. Но при нажатии на миниатюру вся эта галерея смещается вверх.

Как исправить? Мне кажется что нужно какое-то свойства добавить, мол чтобы фиксация была относительно экрана.. или как.. помогите пожалуйста.

Я не хочу рекламировать, но я хотел себе поставить именно эту галерею и вот с ней такая проблема:

fly-webmaster.ru/demo/gallery2/index.html

(администраторы честно это не реклама, но если что - я могу прикрепить архив с этим примером, но ведь удобнее когда сразу можно посмотреть)

Qwerty_Wasd · 02.10.2018, 03:43

Делать короче было нечего....ну и.. если кому интересно без JS - https://codepen.io/qwerty_wasd/full/rqOxwj/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="module-gallery-checkbox">
  <input id="one-image" type="radio" name="group-checked" checked="checked"/>
  <input id="two-image" type="radio" name="group-checked"/>
  <input id="three-image" type="radio" name="group-checked"/>
  <input id="four-image" type="radio" name="group-checked"/>
  <input id="five-image" type="radio" name="group-checked"/>
  <label class="preview" for="one-image"><img src="https://dummyimage.com/150x85/cc7a8d/000000.png" alt=""/></label>
  <label class="preview" for="two-image"><img src="https://dummyimage.com/150x85/7a9ecc/000000.png" alt=""/></label>
  <label class="preview" for="three-image"><img src="https://dummyimage.com/150x85/7acca9/000000.png" alt=""/></label>
  <label class="preview" for="four-image"><img src="https://dummyimage.com/150x85/ccc27a/000000.png" alt=""/></label>
  <label class="preview" for="five-image"><img src="https://dummyimage.com/150x85/cc9f7a/000000.png" alt=""/></label><img class="supervision" src="https://dummyimage.com/750x500/cc7a8d/000000.png" alt=""/><img class="supervision" src="https://dummyimage.com/750x500/7a9ecc/000000.png" alt=""/><img class="supervision" src="https://dummyimage.com/750x500/7acca9/000000.png" alt=""/><img class="supervision" src="https://dummyimage.com/750x500/ccc27a/000000.png" alt=""/><img class="supervision" src="https://dummyimage.com/750x500/cc9f7a/000000.png" alt=""/>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  width: 100%;
}
 
body {
  background: #222;
}
 
.module-gallery-checkbox {
  position: relative;
  height: 600px;
  width: 1000px;
  margin: 0 auto;
}
.module-gallery-checkbox > input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.module-gallery-checkbox > .preview {
  position: absolute;
  left: 0;
  cursor: pointer;
}
.module-gallery-checkbox > label[for="one-image"] {
  top: 5%;
  -webkit-transform: translate(20%, 5%);
          -ms-transform: translate(20%, 5%);
      transform: translate(20%, 5%);
}
.module-gallery-checkbox > label[for="two-image"] {
  top: 20%;
  -webkit-transform: translate(20%, 20%);
          -ms-transform: translate(20%, 20%);
      transform: translate(20%, 20%);
}
.module-gallery-checkbox > label[for="three-image"] {
  top: 35%;
  -webkit-transform: translate(20%, 35%);
          -ms-transform: translate(20%, 35%);
      transform: translate(20%, 35%);
}
.module-gallery-checkbox > label[for="four-image"] {
  top: 50%;
  -webkit-transform: translate(20%, 50%);
          -ms-transform: translate(20%, 50%);
      transform: translate(20%, 50%);
}
.module-gallery-checkbox > label[for="five-image"] {
  top: 65%;
  -webkit-transform: translate(20%, 65%);
          -ms-transform: translate(20%, 65%);
      transform: translate(20%, 65%);
}
.module-gallery-checkbox .supervision {
  position: absolute;
  top: 5%;
  left: 25%;
  -webkit-transform: translate(-5%, 0.5%);
          -ms-transform: translate(-5%, 0.5%);
      transform: translate(-5%, 0.5%);
}
.module-gallery-checkbox .supervision {
  display: none;
}
.module-gallery-checkbox #one-image:checked ~ .supervision:nth-of-type(1),
.module-gallery-checkbox #two-image:checked ~ .supervision:nth-of-type(2),
.module-gallery-checkbox #three-image:checked ~ .supervision:nth-of-type(3),
.module-gallery-checkbox #four-image:checked ~ .supervision:nth-of-type(4),
.module-gallery-checkbox #five-image:checked ~ .supervision:nth-of-type(5) {
  display: block;
}

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@dream.reckless 0 / 0 / 0 Регистрация: 04.12.2011 Сообщений: 35

	При нажатии в галерее все смещается "вверх" 01.10.2018, 21:20. Показов 2111. Ответов 1 Метки html, галерея (Все метки) Не знаю что уже делать. Есть простая галерея. Ну очень простая. И все бы хорошо. Но при нажатии на миниатюру вся эта галерея смещается вверх. Как исправить? Мне кажется что нужно какое-то свойства добавить, мол чтобы фиксация была относительно экрана.. или как.. помогите пожалуйста. Я не хочу рекламировать, но я хотел себе поставить именно эту галерею и вот с ней такая проблема: fly-webmaster.ru/demo/gallery2/index.html (администраторы честно это не реклама, но если что - я могу прикрепить архив с этим примером, но ведь удобнее когда сразу можно посмотреть) 0

При нажатии в галерее все смещается "вверх"

Решение