Кнопка на картинке меняет расположение на узком экране

@prizrak115 · Регистрация: 19.02.2018

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

У меня есть картинка в диве и кнопка. Хочу засунуть кнопку на по-центру картинки, сделать получается, но на маленьких экранов кнопка меняет расположение вот код:

HTML

HTML5
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
 <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=1024" />
  <link rel="stylesheet" href="css/style.css">
  <title>SilenceB</title>
</head>
<body>
  <header>
    <nav>
      <div class="navMenu">
        <a href="">О нас</a>
        <a href="">Команда</a>
        <a href="">Форум</a>
        <a href="">Услуги</a>
        <a href="">Правила</a>
        <a href="">Саппорт</a>
      </div>
    </nav>
  </header>
  <div class="containerImg">
    <img src="img/1.png" alt="V.I.P" />
    <input type="button" name="" class="Start">
  </div>
</body>
</html>

CSS

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
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body{
  border-top: 1px solid transparent;
  background-color: #EDEEF0;;
 
}
 
a{
  text-decoration: none;
}
 
/*Menu*/
header{
  width: 100%;
  height: 62px;
  margin-top: -1px;
  background-color: rgba(20, 20, 20, 0.94);
  overflow: hidden;
  position: fixed;
}
 
.navMenu{
  max-width: 960px;
  margin: 0 auto;
  margin-top: -3px;
  display: flex;
  justify-content: space-between;
}
 
.navMenu a{
  font-family: sans-serif;
  font-size: 21px;
  font-weight: bold;
  padding: 20px;
  color: #666;
}
 
.navMenu a:hover{
  color: rgb(255, 255, 255);
  transition: 0.30s;
}
/*End*/
 
/*IMG*/
.containerImg{
  margin-top: 68px;
}
 
.containerImg img{
  width: 100%;
}
 
.containerImg input{
  width: 20px;
  height: 20px;
  z-index: 10000;
  position: absolute;
  top: 200px;
  left: 300px;
}
/*End*/

Добавлено через 13 минут
А да это с кнопкой, место кнопки сылкой сделал ,ну проблема осталась

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.containerImg a{
  position: absolute;
  top: 200px;
  left: 450px;
  font-size: 30px;
  font-family: monospace;
  font-weight: bold;
  border-radius: 10px;
  border: 2px solid black;
  background: rgb(255, 0, 87);
  color: white;
  overflow: hidden;
  padding: 5px;
}

@AlexZaw · 28.06.2018, 17:05

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.containerImg{
  margin-top: 68px;
  position: relative;
}
 
.containerImg input{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@prizrak115 · 29.06.2018, 09:56 **[ТС]**

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.containerImg{
  margin-top: 68px;
  position: relative;
}
 
.containerImg img{
  width: 100%;
}
 
.containerImg input{
  width: 130px;
  height: 100px;
  position: absolute;
  left: 48%;
  top: 60%;
  transform: translate(-50%, -50%);
 
}

@AlexZaw · 29.06.2018, 10:16

Так у вас для нее заданы фиксированные размеры (хотя я бы не сказал что они большие 130x100px всего, но вам виднее).
Задайте ей либо процентные ширину и высоту, либо в качестве едениц измерения укажите vh/vw

@prizrak115 · 29.06.2018, 10:43 **[ТС]**

Да, спасибо не учёл

@prizrak115 · 30.06.2018, 11:02 **[ТС]**

Нет, только заметил что шапка проходить под картинкой, шапка же фиксированная position: relative; всё портит

Добавлено через 6 минут
А всё решил, забыл индекс прописать, надо всё же попробывать самому решить, а не на форум лететь

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	29.06.2018, 10:16
	Так у вас для нее заданы фиксированные размеры (хотя я бы не сказал что они большие 130x100px всего, но вам виднее). Задайте ей либо процентные ширину и высоту, либо в качестве едениц измерения укажите vh/vw 1

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	29.06.2018, 10:43 [ТС]
	Да, спасибо не учёл 0

@prizrak115 0 / 0 / 0 Регистрация: 19.02.2018 Сообщений: 54
	30.06.2018, 11:02 [ТС]
	Нет, только заметил что шапка проходить под картинкой, шапка же фиксированная position: relative; всё портит Добавлено через 6 минут А всё решил, забыл индекс прописать, надо всё же попробывать самому решить, а не на форум лететь 0

Кнопка на картинке меняет расположение на узком экране

Решение