Добавление текста двигает блок вниз

Question

Имеется примерно такой блок:

<div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">...</div>
  <div id="cont-body">...</div>
</div>

К блоку cont применен position: fixed, это что-то вроде карточки, в которой находятся различные кнопки. При нажатии на эти кнопки мне необходимо добавлять в span текст ошибок (банально через .text() у JQuery), он должен отображаться над карточкой. Но суть в том что при добавлении текста карточка (а точнее её контент) двигается вниз в зависимости от размера текста. Мне необходимо сделать так, чтобы независимо от размера текста карточка не двигалась, а текст появлялся ровно над ней.

Вот, на всякий случай, визуализация проблемы:

document.getElementById('btn').onclick = function() {
  document.getElementById('error-text').firstChild.innerText = 'some error text here';
}

#cont {
  position: fixed;
  top: 60%;
  left: 40%;
  width: 250px;
}

#cont-head {
  background: gray;
}

#cont-body {
  background: whitesmoke;
}

#error-text {
  color: red;
}

<div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">some header</div>
  <div id="cont-body">
    some content
    <button id="btn">click</button>
  </div>
</div>

Answer 1

Не совсем понял, чего вы хотите.

position: fixed применен к оболочке cont, а текст и все другие элементы находятся внутри. И сдвигается не ваш блок, а содержимое блока увеличивается на высоту текста ошибки.

Единственный выход, который я вижу:

Можно заранее задать место для текста ошибки, сделать отступ сверху, задать оболочку для текста с определенной высотой, равной отступу сверху. Навешать overflow: hidden на обертку для текста ошибки и радоваться.

Получиться примерно так:

#error-text {
  height: 20px;
  max-height: 20px;
  width: 100%;
  overflow: hidden;
  
}

Но если текст ошибки будет слишком большим, то он не поместиться весь

Answer 2

#error-text присваиваем position:absolute; bottom:40px;

document.getElementById('btn').onclick = function() {
  document.getElementById('error-text').firstChild.innerText = 'some error text here';
}

#cont {
  position: fixed;
  top: 60%;
  left: 40%;
  width: 250px;
}

#cont-head {
  background: gray;
}

#cont-body {
  background: whitesmoke;
}

#error-text {
  color: red;
  position:absolute;
  bottom:40px;
}

<div id="cont">
  <div id="error-text"><span></span></div>
  <div id="cont-head">some header</div>
  <div id="cont-body">
    some content
    <button id="btn">click</button>
  </div></div>

БЛОГ НА HUSL

Добавление текста двигает блок вниз

Ответы (2 шт):