Как остановить разборку div?

Я делаю вещи с барами прогресса ajax и т.д.

В основном у меня есть скрытый div, в котором говорится "Загрузка" в нем, и под ним у меня есть видимый div с моим контентом.

Когда он загружается, он исчезает из содержимого div, делает скрытый div видимым и перемещает его через javascript/относительное позиционирование, находящееся в середине содержимого.

Это выглядит довольно плохо, но, к сожалению, когда div становится видимым, хотя он относительно позиционирован, он берет линию, поэтому мой контент перемещается вниз.

Знаете ли вы, как я могу остановить его от занимаемого места, когда он станет видимым?

Изменить: кто-то удалил тег, который кажется

Загрузочный div начинается с отображения none, поэтому он не занимает места, а затем, когда он становится видимым, он начинает занимать пространство, даже если оно расположено относительно.

Я мог использовать видимые и невидимые, но тогда это заставило бы мое содержимое окна все время.

Похоже, что абсолютное позиционирование - это путь.

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

Изменить: я просто перечитаю ваш ответ, и вы сделали именно это. Спасибо!

Ответ 1

"Вы знаете, как я могу остановить его от занимания места, когда он станет видимым?"

Поместите его абсолютно.

div#theParent {
  position:relative;
  height:200px;
  width:640px;
  top:50px;
  left:50px;
}
div#theChild {
  position:absolute;
  height:100px;
  width:400px; 
  top:50px;
  left:120px;
}

<div id="theParent">
  <div id="theChild">
    <p>This div is absolutely positioned to a relatively-positioned parent.</p>
  </div>
</div>

Ответ 2

Если вы хотите сделать его невидимым, сделайте его действительно невидимым с помощью style="display:none". Есть много способов сделать это... не уверен, как вы это настроили или как вы изменяете свои элементы dom. Предоставьте еще один контекст (с помощью Ajax-элементов управления, пользовательского JavaScript, библиотеки jQuery и т.д.), И мы можем дать вам более конкретное решение.

Ответ 3

Вам нужно играть с опцией отображения, а не с видимой опцией:

Совет. Даже невидимые элементы занимают место на странице. Используйте свойство "display" для создания невидимых элементов, которые не занимают места!

см. w3schools

[EDIT]

После чтения w3fools, даже если они не собрали никакой ошибки о pr_class_visibility, они говорят о pr_class_display: так никогда не увидите w3schools

Но вы можете видеть reference.sitepoint.com:

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

Ответ 4

Вы можете попробовать разные вещи, например. Зависит от того, как создается ваш код. Поскольку вы не представили пример:)

display: none;
height:0px 
line-height: 0px;
font-size: 0px;

Ответ 5

Я знаю, что на это был дан ответ, но если вы используете загрузку, попробуйте:

class='hide'

вместо

class='hidden'