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

@thereal_kh · Регистрация: 13.08.2019

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

Привет форумчане, допустим есть такой код:

HTML5
1
2
3
4
<div class = "parent">
    <div class = "sibling1"></div>
    <div class = "sibling2"></div>
</div>

Вопрос: как позиционировать первый сиблинг относительно ко второму? то есть задать одному из них pos:relative а другому pos:abs? реально ли это как то реализовать?

@aj17 · 12.02.2020, 19:50

thereal_kh, нельзя. Только вложенные блоки можно позиционировать, если у родителя задан relative

@thereal_kh · 12.02.2020, 20:28 **[ТС]**

тогда может вы подскажите мне как лучше реализовать этот блок(фото прилагаю). тут с левой стороны border не сплошной поэтому я думаю лучше его через before/after сделать, но как быть с логотипом? сайт будет адаптивным, как сделать так чтоб логотип твердо стоял на месте при любых размерах экрана?

@thereal_kh · 12.02.2020, 20:29 **[ТС]**

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

нельзя. Только вложенные блоки можно позиционировать, если у родителя задан relative

заранее спасибо

@novichek_1905 · 12.02.2020, 22:32

thereal_kh, сделайте как-то так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box">
  <span><img src="https://www.placehold.it/50" alt=""></span>
  Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Языкового текстов рыбного себя
  взгляд правилами дороге даже подпоясал родного повстречался! От всех домах переулка инициал лучше единственное
  парадигматическая букв что?
  Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Языкового текстов рыбного себя
  взгляд правилами дороге даже подпоясал родного повстречался! От всех домах переулка инициал лучше единственное
  парадигматическая букв что?
  Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Языкового текстов рыбного себя
  взгляд правилами дороге даже подпоясал родного повстречался! От всех домах переулка инициал лучше единственное
  парадигматическая букв что?
  Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты. Языкового текстов рыбного себя
  взгляд правилами дороге даже подпоясал родного повстречался! От всех домах переулка инициал лучше единственное
  парадигматическая букв что?
</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
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.box {
  margin: 40px;
  color: red;
  padding: 10px 10px 10px 40px;
  border: 1px solid #000;
  border-left: 0;
  position: relative;
}
.box span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box span:after,
.box span:before {
  content: " ";
  display: block;
  flex-grow: 1;
  width: 1px;
  background-color: #000;
}

@Mailo · 14.02.2020, 03:18

основной блок делается с тремя границами, верхней правой и нижней. Логотип позиционироуется как

CSS
1
2
3
left:0;
top:50%;
transorm: translate3D(-50%, -50%, 0);

Псевдокласы добавляются к внешнему блоку (тот что с 3мя бордерами), что бы сделать эти "оси логотипа" по x%, соответственно 2 псевдокласса с :

CSS
1
2
left:0;
top:0; и bottom:0;

@novichek_1905 · 14.02.2020, 14:14

Mailo, вы так объяснили, что даже я не понял бы, как это сделать) Давайте полный код что ли) Но что-то мне подсказывает, кинА не будет)

@Mailo · 15.02.2020, 00:47

Да не будет, ленивый я слишком код писать. Идею вроде как на пальцах объяснил, там слишком мало букв и цифр что бы возникли какие то другие варианты. Это только ответ не на первый пост а на третий с картинкой, на первый нет ответа у меня.

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	12.02.2020, 19:50
	Сообщение было отмечено thereal_kh как решение Решение thereal_kh, нельзя. Только вложенные блоки можно позиционировать, если у родителя задан relative 1

@thereal_kh 0 / 0 / 0 Регистрация: 13.08.2019 Сообщений: 10
	12.02.2020, 20:28 [ТС]
	тогда может вы подскажите мне как лучше реализовать этот блок(фото прилагаю). тут с левой стороны border не сплошной поэтому я думаю лучше его через before/after сделать, но как быть с логотипом? сайт будет адаптивным, как сделать так чтоб логотип твердо стоял на месте при любых размерах экрана? 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	14.02.2020, 14:14
	Mailo, вы так объяснили, что даже я не понял бы, как это сделать) Давайте полный код что ли) Но что-то мне подсказывает, кинА не будет) 1

@Mailo 248 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,312
	15.02.2020, 00:47
	Да не будет, ленивый я слишком код писать. Идею вроде как на пальцах объяснил, там слишком мало букв и цифр что бы возникли какие то другие варианты. Это только ответ не на первый пост а на третий с картинкой, на первый нет ответа у меня. 0

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

Решение