|
Привязка нескольких объектов к ссылке
Здравствуйте!
Никогда такого не было и вот опять! Помогите пожалуйста средствами разметки сделать анимацию.. Есть три слоя (DIV). z-index: -1; z-index: -2; z-index: -3; Первый (-1) и третий (-3) слои связаны по одному краю, второй (-2) слой не подвижен и находится между ними. При этом третий (-3) частично спрятан за экраном.. Фактически нужно лишь "раскрыть" спрятанный слой на его ширину, но вместе с тем оставить его связанным с первым слоем, т.е. предвинуть эти оба слоя вместе.. ---- Честно сказать, сам уже и так и эдак, но.. Поиск? Приводит к разнообразию произвольных решений, каждое из которых работает, но как ни стараюсь их объединить и применить, это никак не приводит к желаемому результату.. |
Цитата:
Цитата:
Цитата:
ЗЫ Вставляй сюда свой спрятанный див и оба связанных как хтмл код. Тогда будет серьезно. |
Спасибо за ответ.
<html><head> <style> #x {z-index: -1; position: absolute; background-color: blue; bottom: 15; left:15; width: 200; height: 185;} #xx {z-index: -2; position: absolute; background-color: red; bottom: 0; left:15; width: 200; height: 35;} #xxx {z-index: -3; position: absolute; background-color: yellow; bottom: -600; left:15; width: 200; height: 800; border: 1px solid black;} </style> </head> <body> <div id="x">1</div> <div id="xx">2</div> <div id="xxx">3</div> </body> </html> Дело в том, что z-index не работает, если привязать первый и третий слои друг к другу поместив один в другой и двигать их, средний не будет находится между ними, (когда они начнут перемещение равное высоте нижнего слоя, он должен оставаться на месте).. Все, что я нашел по скриптам, работает с отделаьными элементами, а вот с парой не связанных элементов.. Знаю, что делаю что-то не так, но вот что именно, не могу понять.. |
Ты зачем этой занимаешься? Ну если есть повод отпостить что-то на говнокод.ру, то твой говнокод вполне мотивирует. )))
Во-первых боттом - это бред. Дно есть когда оно есть, а когда ничего нет, скорее всего браузер топает от топа. Во-вторых единицы измерения указывай. И последнее, бери вот этот код как базисно вменяемый и учись дальше. Я сшил твои кувадратики, дальше разберешься почему они сшились. <html><head> <style> #x {z-index: 1; position: absolute; background-color: blue; top: 15; left:15; width: 200; height: 185; } #xx {z-index: 2; position: absolute; background-color: red; top: 200; left:15; width: 200; height: 35; } #xxx {z-index: 3; position: absolute; background-color: yellow; top: 235; left:15; width: 200; height: 200; } </style> </head> <body> <div style="position:relative;"> <div id="x">1</div> <div id="xx">2</div> <div id="xxx">3</div> </div> </body> </html> |
Да, про самую мякотку забыл. С какого одеколона у тебя z-index негативный? z-index - всегда относительный, то есть он не глобально херачит как думают некоторые оленеводы, а опирается на предка крепко стоящего на ногах. То есть div z-index=1, задаетъ всем отпрыскам такой же, а если какой-то хочет выше, то ставит себе z-index=1 и получается типа 2.
|
Благодарю вас, милейший, но у меня нет "дна" на странице и все элементы на ней закреплены, а прокрутка отсутствует. Засим, мне вовсе не ясно что вы подразумеваете под "сшил" мои элементы, если они мне нужны именно по отдельности и таки да, как сдвинуть два элемента, в данном случае слоя, так чтобы средний остался на месте?
UPD отметил там момент сдвига, в первом сообщении с html.. |
Я ж тебе и пишу, что нет у страницы "дна", вертикаль практически бесконечна, поскольку прокрутка присутствует, в том числе в твоем калечном хтмле.
Как и большинство оленеводов, ты понимаешь фразу position:absolute абсолютно, типа от левого верхнего пиксела монитора. На самом деле в хтмле нет ничего абсолютного, там вообще все относительное, в том числе и абсолютные элементы, просто они выпадают из потока и опираются на предка в потоке, если даже этот предок - туловище (body), или космос - html, поскольку html - это такой же элемент под названием htmlElement. Дошло? Конечно нет. Так вот, чтобы сделать все вообще абслютным, надо пофиксить хтмль намертво, то есть html{width:100%;height:100%;position:fixed;overflow:hidden;} Только так можно избавиться от всех прокруток несмотря на любое содержание. А потом уже корежить это содержание так, чтобы оно вообще оказалось внутри пофиксенного хтля. |
Вот смотри, позиции абсолютные, а поля туловища запросто смещают нули в топ и лефт на указанную ширину поля. Понял теперь, что нет там ничего абсолютного? Все остальное в комментах хтмля.
<html><head> <style> html{width:100%;height:100%;position:fixed;overflow:hidden;} body{margin:20px;} #x { position: absolute; background-color: blue; width: 100; /* меняй размеры */ height: 100; top: 0; /* меняй координаты */ left: 0; z-index: 10; /* меняй ось z */ } /* во всех остальных квадратах и "сшивай" блеать как угодно */ #xx { position: absolute; background-color: red; width: 100; height: 100; top: 50; left:50; z-index: 2; } #xxx { position: absolute; background-color: yellow; width: 100; height: 100; top: 100; left: 100; z-index: 3; } </style> </head> <body> <div style="position:relative;"> <div id="x">1</div> <div id="xx">2</div> <div id="xxx">3</div> </div> </body> </html> |
Простите меня, но каким, простите еще раз, образом это поможет мне показать спрятаную часть слоя №3, сдвинув его на всю его высоту, одновременно с этим сдвинуть слой №1, оставив его привязанным к краю слоя №3, оставив не подвижным слой №2.?
|
Тебе поможет скрипт, который будет привязывать квадраты как тебе надо и двигать куда хочешь. Напиши такой скрипт, поскольку сценарий кина есть только у тебя.
|
Часовой пояс GMT +3, время: 09:08. |
|