Помогите с position:absolute

12
Оу!
На сайте с 19.12.2007
Offline
221
1057

Ув. гуру! Прошу помочь:

<div>блок1</div>

<div style="position:absolute; top:0px; width:100%;">блок2</div>

Если использовать этот код, то блок2 и блок1 будут находится на одном и тот же месте, в начале страницы, будут наезжать друг на друга.

Требуется поместить блок1 строго после блока2.

Блок2 не имеет фиксированной высоты - в нём содержаться данные, которые могут менять свою высоту и следственно сам блок2 будет растягиваться по высоте.

К сожалению, я плоховато разбираюсь в этом "position:absolute;".

Подскажите, как сделать, чтобы блок1 автоматически становился после блок2, какой бы тот высоты ни был.

Заранее спасибо!

Лучшие мобильные прокси тут: https://goo.su/pU6uat
T
На сайте с 20.03.2007
Offline
67
Toy
#1

А зачем тут собсно позиционирование? :D

<div>блок 2</div>

<div>блок 1</div>
Оу!
На сайте с 19.12.2007
Offline
221
#2

Toy, я хочу, чтобы блок1 находился в начале HTML кода.

T
На сайте с 20.03.2007
Offline
67
Toy
#3

Оптимизация? Мне кажется, что абсолютное позиционирование не совсем то, что вам нужно. Либо можно его использовать совместно с javascript. К примеру вычислять высоту второго блока при загрузке документа, затем показывать первый блок с нужным отступом.

Оу!
На сайте с 19.12.2007
Offline
221
#4

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

Toy, так как Вы ответа прямого не дали, могу делать вывод, что это сделать невозможно?

Если делать совместно с Javascript, тогда я так понимаю, блоки будут выведены на яваскрипте, что не есть хорошо для поисковиков..

T.R.O.N
На сайте с 18.05.2004
Offline
314
#5
Оу!:
Это необходимо для оптимизации под поисковики, и для удобства пользователей (чтобы необходимые блоки загружались быстрее всех остальных).

для этого облегчается страница и цмс-ка настраивается на скорость... А если у Вас страница 100-200к - то в помойку ее

T.R.O.N добавил 30.06.2010 в 17:31

Оу!:
Если делать совместно с Javascript, тогда я так понимаю, блоки будут выведены на яваскрипте,

совместно с JS .... и на JS ... - это разные вещи, или нет? читайте по буквам

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
Оу!
На сайте с 19.12.2007
Offline
221
#6
T.R.O.N:
для этого облегчается страница и цмс-ка настраивается на скорость... А если у Вас страница 100-200к - то в помойку ее

мои страницы весят по 50kb, и я в курсе, как их требуется оптимизировать.

совместно с JS .... и на JS ... - это разные вещи, или нет? читайте по буквам

лучше скажите как это сделать совместно с JS

Dim_K
На сайте с 11.07.2007
Offline
85
#7

Тут только с помощью position: absolute не обойтись. Если плавающих блоков нет между ними, то можно попробовать сделать float:left;width:100%;

Вы б лучше ссылку на макет сверстанный дали, чтоб не гадать. Универсального решения нет по-моему

T.R.O.N
На сайте с 18.05.2004
Offline
314
#8
Оу!:
мои страницы весят по 50kb, и я в курсе, как их требуется оптимизировать.

при таком размере, просто нелепо говорить о медленности загрузки..., или у Вас иное мнение?

Оу!:
лучше скажите как это сделать совместно с J

я лишь уточнил, для ясности... Объясню, при позиционировании, по мере загрузки страницы, Ваш второй блок будет постоянно прыгать по экрану (т.к. не информации о положении остальных частей страницы) и жудко раздражать... Кроме этого, не забывайте, что при первом входе, стлили будут загружены после получения контента страницы.

Совет, не насилуйте посетителей сайта... Страница маленькая, грузится быстро (судя по объему ~1-2 сек max). Если возникает проблема, постарайтесь оптимизировать стили, порядок загрузки и сам код.

K
На сайте с 29.06.2005
Offline
76
#9

Так можно вычислить высоту блока 2:

http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#razmery-dokumenta-i-elementov

а потом смещайте блок 1 на это значение.

devastat10n
На сайте с 29.06.2010
Offline
43
#10
<div>блок1</div>
<div style="position:absolute; top:0px; width:100%;">блок2</div>

Тут есть один нюанс.

Когда вы используете абсолютное позиционирование. То как бы вырываете блок из дизайна страницы и наклеиваете его на тех координатах, на которых указали.

Поэтому есть смысл использовать абсолютное позиционирование и для другого блока.

Либо использовать «релатив» позиционирование для блоков (тоесть, когда блоки будут выровнены по отношению друг к другу)

Профессия веб-мастер (http://webmasterprof.ru)
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий