Позиция относительная, как избавиться от мертвого пространства?

мой первый вопрос здесь, я новичок в html/css, так что медведь со мной, если это звучит слишком noobish вопроса. У меня нет кода, который так плохо объясняет словами, потому что сама проблема проста, но я не могу найти решение прямо сейчас.Позиция относительная, как избавиться от мертвого пространства?

Когда вы позиционируете элемент с использованием положения: относительный; он перемещается из того места, где он обычно находился, с указанными координатами, правильно?

Теперь, если у вас много элементов в нормальном потоке, и они берут, пусть говорят 2000px высоты вместе, и я хочу поместить все эти элементы в div [1000px x 1000px], поэтому я перемещаю их по позициям с использованием положения относительно , все нормально и dandy, за исключением того, что страница все еще 2000px, хотя я переместил элементы, как решить эту проблему, есть 1 или несколько способов достижения этого.

Редактировать: Возможно, это запутывает то, что я имел в виду. Вот пример кода, чтобы вы, ребята, могли видеть более четко. Теперь я получил те divs, где я хочу их, но под ними, я думаю, вы можете сказать, что их начальная позиция все еще существует и создает свиток.

<html> 
<head> 
<style> 
#one{ 
border: 1px green solid; 
height: 500px; 
width: 20px; 
} 
#two{ 
border: 1px black solid; 
height: 500px; 
width: 20px; 
position: relative; top: -502px; left: 100px; 
} 
#three{ 
border: 1px red solid; 
height: 500px; 
width: 20px; 
position: relative; top: -1004px; left: 200px; 
} 
</style> 
</head> 
<body> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
</body> 
</html>

источник

2013-03-07 Eddie Nowayjosé

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

Вы ничего не сказали о ширине этих элементов? также укладывают их все один поверх другого (т. е. если бы это была таблица .. это был бы только один столбец из нескольких строк)? или вы также можете складывать некоторые рядом друг с другом? (т. е. если бы это была таблица .. вы можете иметь несколько столбцов и количество строк <количество элементов)? – abbood

I second @AaronRussell .. даже теоретический вопрос может быть оформлен в терминах кода образца .. в общем .. если вы зададите смутные вопросы .. вы получите смутные ответы в лучшем случае – abbood

-1

Если вы хотите, чтобы ограничить все элементы внутри нашего DIV, вы можете использовать переполнение: скрытый

HTML

<div id="elementsinadiv"> 
    <div class="myelement">Some stuff</div> 
    <div class="myelement">Some stuff</div> 
    <div class="myelement">Some stuff</div> 
    <div class="myelement">Some stuff</div> 
</div>

CSS

#elementsinadiv{ 
    height: 100px; 
    width: 200px; 
    background-color: blue; 
    overflow: hidden; 
} 

.myelement{ 
    position: relative; 
    display: block; 
    height: 50px; 
    width: 100px; 
    border: 1px solid red; 
    background-color: #f3f3f3; 
}

http://jsfiddle.net/zVmSv/5/

источник

2013-03-07 17:36:35

Принятый ответ еще никем, SO может быть очень суровым. –

Использование отрицательной маржи вместо:

.example { 
    margin-top: -1000px; 
    position: relative; 
}

Относительное позиционирование в этом случае необходимо, чтобы поместить элемент выше элемента, что она перекрывает в результате сдвига с помощью отрицательного края. Также может понадобиться использовать z-index, если сами перекрывающиеся элементы расположены относительно или абсолютно.

источник

2013-03-07 17:28:01

Спасибо, не совсем уверен, что мне помогает. –

Позиция относительная, как избавиться от мертвого пространства?

ответ

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