Как сделать чтобы у ссылок описание появлялось в определённом месте и расположение не менялось от того где находится ссылка?

Рейтинг: 0Ответов: 1Опубликовано: 28.04.2023

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

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

У меня таких ссылок с описанием 15 штук, мне нужно решение, чтобы один раз прописать позицию для всех блоков с описанием, а не писать для каждого блока свою позицию.

function look(elemId) {
  var elem = document.getElementById(elemId);
  elem.style.display === "none" ?
    elem.style.display = "block" : elem.style.display = "none";
}
.guests__fi {
 margin: 16px 0px 16px 0px;
 display: block;
 cursor: pointer;
}

.guest__card {
  display: none;
  margin: 0px;
  padding: 0px;
}

.block__guest {
  display: block;
  position: absolute;
  width: 350px;
  height: 540px;
  margin: -45px 0px 0px 295px;
}

.guest__what__does__card {
  width: 340px;
  height: 174px;
  font-weight: 400;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 28px;
  color: #A1A6B4;
  margin: 12px 0px 0px 0px;
}
<a class="guests__fi" href="#">
  Владислав Кауперс
</a>
<div id="link10" class="guest__card">
  <div class="block__guest">
      <p class="guest__what__does__card">Российский искусствовед, арт-критик, куратор             выставок, дизайнер, кандидат культурологии. Арт-критик газеты                           &laquo;Коммерсантъ&raquo;. Ведёт активную блогерскую деятельность как куратор           музея &laquo;Гараж&raquo;, коим является с&nbsp;2016&nbsp;года.
     </p>
  </div>
</div>

<a class="guests__fi" href="#">
  Михаил  Пожитников
</a>
<div id="link11" class="guest__card">
    <div class="block__guest">
        <p class="guest__what__does__card">
      Российский искусствовед, арт-критик, куратор выставок, дизайнер, кандидат               культурологии. Арт-критик газеты &laquo;Коммерсантъ&raquo;. Ведёт активную             блогерскую деятельность как куратор музея &laquo;Гараж&raquo;, коим является           с&nbsp;2016&nbsp;года.
    </p>
  </div>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вы применили к блокам с описанием абсолютное позиционирование. Оно позволяет "выдернуть" блок из основного потока документа. Поэтому, если указать расположение блоков (top, left), они все будут появляться в одном месте:

function look(elemId) {
  var elem = document.getElementById(elemId);
  elem.style.display === "none" ?
    elem.style.display = "block" : elem.style.display = "none";
}
.guests__fi {
 margin: 16px 0px 16px 0px;
 display: block;
 cursor: pointer;
}

.guest__card {
  display: none;
  margin: 0px;
  padding: 0px;
}

.block__guest {
  display: block;
  position: absolute;
  width: 350px;
  height: 540px;
  margin: -45px 0px 0px 295px;
  top: 50px; /* отступ сверху в 50px */
  left: 50px; /* отступ слева в 50px */
}

.guest__what__does__card {
  width: 340px;
  height: 174px;
  font-weight: 400;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 28px;
  color: #A1A6B4;
  margin: 12px 0px 0px 0px;
}
<a class="guests__fi" href="#">
  Владислав Кауперс
</a>
<div id="link10" class="guest__card">
  <div class="block__guest">
      <p class="guest__what__does__card">Российский искусствовед, арт-критик, куратор             выставок, дизайнер, кандидат культурологии. Арт-критик газеты                           &laquo;Коммерсантъ&raquo;. Ведёт активную блогерскую деятельность как куратор           музея &laquo;Гараж&raquo;, коим является с&nbsp;2016&nbsp;года.
     </p>
  </div>
</div>

<a class="guests__fi" href="#">
  Михаил  Пожитников
</a>
<div id="link11" class="guest__card">
    <div class="block__guest">
        <p class="guest__what__does__card">
      Российский искусствовед, арт-критик, куратор выставок, дизайнер, кандидат               культурологии. Арт-критик газеты &laquo;Коммерсантъ&raquo;. Ведёт активную             блогерскую деятельность как куратор музея &laquo;Гараж&raquo;, коим является           с&nbsp;2016&nbsp;года.
    </p>
  </div>
</div>