Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
thereal_kh
0 / 0 / 0
Регистрация: 13.08.2019
Сообщений: 10
1

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

12.02.2020, 19:30. Просмотров 856. Ответов 7

Привет форумчане, допустим есть такой код:
HTML5
1
2
3
4
<div class = "parent">
    <div class = "sibling1"></div>
    <div class = "sibling2"></div>
</div>
Вопрос: как позиционировать первый сиблинг относительно ко второму? то есть задать одному из них pos:relative а другому pos:abs? реально ли это как то реализовать?
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2020, 19:30
Ответы с готовыми решениями:

позиционирование относительно div
Привет участникам. Есть два блока див, могу ли я как-то один блок позиционировать относительно...

позиционирование fixed относительно Div
Возникла задача, спозиционировать один див относительно окна и другого дива. Нарисовал что и как...

Позиционирование текста относительно изображения
Помогите спозиционировать текст СТРОГО по центру изображения&lt;span&gt;&lt;img src=&quot;Sjed.png&quot; width=&quot;36&quot;...

Позиционирование относительно родительского блока
Здравствуйте! Есть родительский блок и два дочерних. Задача: синий блок расположить в правом...

Позиционирование блоков относительно z-оси
Здравствуйте. Имеется страница, на всю ширину и высоту которой растянут блок с яндекс картами....

7
aj17
330 / 307 / 167
Регистрация: 02.06.2014
Сообщений: 1,126
12.02.2020, 19:50 2
Лучший ответ Сообщение было отмечено thereal_kh как решение

Решение

thereal_kh, нельзя. Только вложенные блоки можно позиционировать, если у родителя задан relative
1
thereal_kh
0 / 0 / 0
Регистрация: 13.08.2019
Сообщений: 10
12.02.2020, 20:28  [ТС] 3
тогда может вы подскажите мне как лучше реализовать этот блок(фото прилагаю). тут с левой стороны border не сплошной поэтому я думаю лучше его через before/after сделать, но как быть с логотипом? сайт будет адаптивным, как сделать так чтоб логотип твердо стоял на месте при любых размерах экрана?
Позиционирование относительно сиблинга
0
thereal_kh
0 / 0 / 0
Регистрация: 13.08.2019
Сообщений: 10
12.02.2020, 20:29  [ТС] 4
Цитата Сообщение от aj17 Посмотреть сообщение
нельзя. Только вложенные блоки можно позиционировать, если у родителя задан relative
заранее спасибо
0
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
12.02.2020, 22:32 5
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;
}
0
Mailo
151 / 139 / 18
Регистрация: 18.02.2010
Сообщений: 1,516
14.02.2020, 03:18 6
основной блок делается с тремя границами, верхней правой и нижней. Логотип позиционироуется как
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;
0
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
14.02.2020, 14:14 7
Mailo, вы так объяснили, что даже я не понял бы, как это сделать) Давайте полный код что ли) Но что-то мне подсказывает, кинА не будет)
1
Mailo
151 / 139 / 18
Регистрация: 18.02.2010
Сообщений: 1,516
15.02.2020, 00:47 8
Да не будет, ленивый я слишком код писать. Идею вроде как на пальцах объяснил, там слишком мало букв и цифр что бы возникли какие то другие варианты. Это только ответ не на первый пост а на третий с картинкой, на первый нет ответа у меня.
0
15.02.2020, 00:47
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.02.2020, 00:47

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Позиционирование относительно соседних элементов
Здравствуйте. И собственно сразу интересующий вопрос : можно ли позиционировать элементы...

Позиционирование таблицы и текста относительно картинки
Нужно сделать чтобы картинка располагалась по центру, а справа от нее располагалась таблица. Снизу...

Позиционирование сайта относительно окна браузера
Мне нужно чтобы при открытии сайта блок div с баннером был скрыт вверху и при заходе на сайт не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.