Сдвиг divs все еще занимает оригинальное пространство?

Итак, на моем сайте у меня есть вложенные div. Используя мой код, я перемещаю их так:Сдвиг divs все еще занимает оригинальное пространство?

float:left; 
    position:relative; 
    top: 5em; 
    left: -4em; 
    margin-left: auto; 
    margin-right: auto;

Итак, когда сайт загружается, все находится в нужном месте. Тем не менее, на другой контент по-прежнему влияет место, в котором будет использоваться div. Который, я буду называть «призрачным div»

Я уверен, что это распространенная проблема, но я понятия не имею, как правильно ее формулировать, поэтому я не смог найти правильную проблему.

Пример: Ghost Div

источник

2011-02-04 Johannes

У вас есть рабочая ссылка? – yoda

Извините, йода, я работаю на местном уровне. Код не очень длинный (я только начал), я был бы более чем счастлив опубликовать его, если захочу. – Johannes

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

Это именно то, что позиция: относительная; должен делать. Если вы хотите, чтобы элемент не участвовал в макете, используйте позицию: absolute; вместо. Вы можете сделать это относительно другого элемента, сделав одного из своих родителей позиционированным элементом (например, применяя положение: относительное, без каких-либо координат)

источник

2011-02-04 01:52:05

Ничего себе, спасибо за подсказку. Я никогда не знал, что этот родственник сохранил «пространство», а абсолютное - нет! – Johannes

или иначе сохранить позицию относительно и использовать отрицательные поля. Не уверен, что это может быть так, но .. – Lucius

Matti is right.

Кроме того, что вы, вероятно, хотите сделать это:

Сделать позицию контейнерного элемента: относительная (но не кладите сверху/слева/справа/снизу на что) сделать этот элемент вы находитесь попытка двигаться: позиция: абсолютная;

Затем ваши координаты элемента устанавливаются относительно элемента контейнера.

Когда я говорю «элемент контейнера», я имею в виду, какой бы элемент он ни был, который обертывает этот элемент, который вы пытаетесь переместить.

Так что, если ваш HTML-код, как это:

<div id="header"> 
    <div id="weird-symbol"><img src="/symbo.gif" /></div> 
    .. some other stuff .. 
</div>

Тогда ваш CSS должен быть что-то вроде:

#header { position: relative; } 
#header #weird-symbol { position: absolute; left: -200px; top: 30px; }

или что-то в этом роде.

Надеюсь, это поможет

источник

2011-02-04 02:01:36 arnorhs

Спасибо за примеры! – Johannes

Сдвиг divs все еще занимает оригинальное пространство?

ответ

Смежные вопросы