Позиционирование изображений относительно друг друга

@pedroscucker · Регистрация: 07.02.2017

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

Есть картинка №1, внутри которой, есть картинка №2, которая спозиционирована относительно №1. При попытке центрировать картинку №1, внутренняя картинка №2 теряет позицию относительно картинки №1. Подскажите, что не так?

Комментарий модератора

Запрещено размещать задания и решения в виде картинок и других файлов с их текстом! (Правила п.5.18)

@sit_a · 07.02.2017, 01:33

У вас все происходит именно так как должно происходить. При изменении позиции родителя будет происходить смена позиции дочернего элемента. Каая перед вами стоит задача? может вам нужна другая реализация? Можно как вариант отобразить картинку в родительском блоке через свойство ( background )

@pedroscucker · 07.02.2017, 02:34 **[ТС]**

Разместил скрин кода, но модератор удалил. Задача следующая: есть панель навигации по сайту. Она состоит из фонового изображения и кнопок. Эту панель нужно разместить по центру, чтобы кнопки остались на своих местах. Но при изменении положения фонового изображения, кнопки теряют свои позиции относительно фонового рисунка, и размещаются относительно краёв экрана.

Qwerty_Wasd · 07.02.2017, 03:55

Эмм... родитель

CSS
1
position: relative;

дети

CSS
1
position:absolute;

Если я вас правильно понял конечно)

Добавлено через 1 минуту
А вообще кусок кода в студию пожалуйста - дабы воспроизвести у себя ваш трабл.

@pedroscucker · 07.02.2017, 17:17 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
 <style>
  #parrent{position: relative;}
  #child{position:absolute;
   top:58px;
   left:70px}
 </style>
</head>
 
<body>
 <div id="parrent">
   <img src="pic/fon.jpg" />
   </img> 
 </div>
  <div id="child">
   <img src="pic/1.png" />
   </img>
  </div>
</body>

Если не центрировать родительское изображение, то ориентация детей работает. Но мне же нужно это всё центрировать по горизонтали. А при попытке это сделать, позиционирование детей относительно родителя пропадает.

@SergioSup · 07.02.2017, 18:12

Исходя из этого кода вы или ошиблись или не совсем понимаете понятия parent и child

@pedroscucker · 07.02.2017, 18:12 **[ТС]**

Где ошибка?

@cthusq · 07.02.2017, 18:18

pedroscucker, У вас чайлд вне родителя.

HTML5
1
2
3
4
5
6
<div id="parrent">
  <img src="pic/fon.jpg" /> 
  <div id="child">
   <img src="pic/1.png" />
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
#parrent{
  position: relative;
}
#child{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

@SergioSup · 07.02.2017, 18:19

у вас родителем для id child является body

@pedroscucker · 07.02.2017, 18:29 **[ТС]**

Исправил, но проблему это не решило. Центрирую картинку вот таким образом, и позиционирование детей относительно родителя перестаёт работать:

HTML5
1
<div id="parrent" align="center">

Вот целый код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
 <style>
  #parrent{position: relative;}
  #child{position:absolute;
   top:58px;
   left:70px}
 </style>
</head>
 
<body>
 <div id="parrent" align="center">
   <img src="pic/fon.jpg" />
   </img> 
  <div id="child">
   <img src="pic/1.png" />
   </img>
 </div>
  </div>
</body>

@cthusq · 07.02.2017, 18:46

pedroscucker, нету такого атрибута align, он только для таблицы и то его уже не юзают. Есть text-align и записывать нужно так :

HTML5
1
<div id="parrent" style="text-align:center">

А по вопросу, то это:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
 <style>
  #parrent{
  position: relative;
}
#child{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
 </style>
</head>
 
<body>
 <div id="parrent" align="center">
   <img src="pic/fon.jpg" />
  <div id="child">
   <img src="pic/1.png" />
  </div>
  </div>
</body>

не решает проблему?

@pedroscucker · 07.02.2017, 19:09 **[ТС]**

Пробую

Добавлено через 12 минут
Сделал так, и всё заработало. Но есть сомнения насчёт того, правильно ли это? Может будут какие-то косяки?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
 <style>
  #parrent{
  position: relative;
}
#child{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-350%,-450%);
}
 </style>
</head>
 
<body>
 <div id="parrent" align="center">
   <img src="pic/fon.jpg" />
  <div id="child">
   <img src="pic/1.png" />
  </div>
  </div>
</body>

@cthusq · 07.02.2017, 19:12

а вы можете все кинуть архивом? Интересно даже стало посмотреть.

@pedroscucker · 07.02.2017, 19:25 **[ТС]**

Боюсь, что нет. Так всё-таки, можно так делать?

Добавлено через 10 минут
Имею в виду такое размещение детей относительно родителя - это правильно? Просто мне этот метод кажется слегка кустарным

@cthusq · 07.02.2017, 19:28

Если осторожно.Ну а в идеале должно было быть нормально в изначальном варианте.
И вообще лучше почитайте : http://frontender.info/centeri... ete-guide/

@pedroscucker · 07.02.2017, 20:21 **[ТС]**

В статье речь идёт о центрировании, а мне нужно расположить детей в определённых местах внутри родителя. Центрировать нужно только родителя. А изначальный вариант кода также только центрирует детей внутри родителя. Может есть какая статья на эту тему? Поиск не дал результатов

@cthusq · 08.02.2017, 06:04

pedroscucker,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
 <style>
  #parrent{
  position: relative;
}
#child{
  position: absolute;
  left:свои%;
  top:свои%;
 }
 </style>
</head>
 
<body>
 <div id="parrent" align="center">
   <img src="pic/fon.jpg" />
  <div id="child">
   <img src="pic/1.png" />
  </div>
  </div>
</body>

@DDyst · 08.02.2017, 16:00

Сообщение от pedroscucker

мне нужно расположить детей в определённых местах внутри родителя. Центрировать нужно только родителя

Родителю задаёте

CSS
1
position: relative;

, дочерним элементам задаёте

CSS
1
position: absolute;

и крутите их внутри, как хотите. Родительский элемент можете тоже крутить, ведь дочерние позиционированы относительно него.

Не по теме:

Тег <img> не парный, не нужно после него прописывать </img>.
Слово "parent" пишется с одной r.
Использование атрибута id для стилизации - плохая практика.

З.Ы. Прочитав название вашего изображения, у меня закралась мысль, что вы пытаетесь задать фон элемента. Фоновые и декоративные изображения задаются с помощью CSS свойства background, а не с помощью тега <img>.

Добавлено через 13 минут

Сообщение от pedroscucker

Имею в виду такое размещение детей относительно родителя - это правильно?

Вам следует разобраться с тем, какие элементы называются родительскими. От того, что вы у них в айди пропишите какие-то названия, они таковыми не станут.

HTML5
1
2
3
4
5
6
7
8
9
<body>
  <div class="wrap">
    <div class="block">
      <div class="test"></div>
      <div class="test"></div>
      <div class="test"></div>
    </div>
  </div>
</body>

Например, в моём коде элемент .wrap является родительским для элемента .block и для всех элементов .test. При этом элемент .block является его прямым потомков (дочерним элементом). Элементы .test также являются потомками элемента .wrap, но дочерними ему при этом не являются.

@pedroscucker · 08.02.2017, 17:14 **[ТС]**

Очень спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@sit_a 16 / 16 / 11 Регистрация: 17.06.2016 Сообщений: 61
	07.02.2017, 01:33
	У вас все происходит именно так как должно происходить. При изменении позиции родителя будет происходить смена позиции дочернего элемента. Каая перед вами стоит задача? может вам нужна другая реализация? Можно как вариант отобразить картинку в родительском блоке через свойство ( background ) 0

@pedroscucker 0 / 0 / 1 Регистрация: 07.02.2017 Сообщений: 27
	07.02.2017, 02:34 [ТС]
	Разместил скрин кода, но модератор удалил. Задача следующая: есть панель навигации по сайту. Она состоит из фонового изображения и кнопок. Эту панель нужно разместить по центру, чтобы кнопки остались на своих местах. Но при изменении положения фонового изображения, кнопки теряют свои позиции относительно фонового рисунка, и размещаются относительно краёв экрана. 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	07.02.2017, 18:12
	Исходя из этого кода вы или ошиблись или не совсем понимаете понятия parent и child 0

@pedroscucker 0 / 0 / 1 Регистрация: 07.02.2017 Сообщений: 27
	07.02.2017, 18:12 [ТС]
	Где ошибка? 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	07.02.2017, 18:19
	у вас родителем для id child является body 0

@cthusq 3 / 3 / 4 Регистрация: 24.09.2015 Сообщений: 44
	07.02.2017, 19:12
	а вы можете все кинуть архивом? Интересно даже стало посмотреть. 0

@pedroscucker 0 / 0 / 1 Регистрация: 07.02.2017 Сообщений: 27
	07.02.2017, 19:25 [ТС]
	Боюсь, что нет. Так всё-таки, можно так делать? Добавлено через 10 минут Имею в виду такое размещение детей относительно родителя - это правильно? Просто мне этот метод кажется слегка кустарным 0

@cthusq 3 / 3 / 4 Регистрация: 24.09.2015 Сообщений: 44
	07.02.2017, 19:28
	Если осторожно.Ну а в идеале должно было быть нормально в изначальном варианте. И вообще лучше почитайте : http://frontender.info/centeri... ete-guide/ 0

@pedroscucker 0 / 0 / 1 Регистрация: 07.02.2017 Сообщений: 27
	07.02.2017, 20:21 [ТС]
	В статье речь идёт о центрировании, а мне нужно расположить детей в определённых местах внутри родителя. Центрировать нужно только родителя. А изначальный вариант кода также только центрирует детей внутри родителя. Может есть какая статья на эту тему? Поиск не дал результатов 0

@pedroscucker 0 / 0 / 1 Регистрация: 07.02.2017 Сообщений: 27
	08.02.2017, 17:14 [ТС]
	Очень спасибо! 0