30.07.2016, 00:27
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Привязка нескольких объектов к ссылке
Здравствуйте!
Никогда такого не было и вот опять! Помогите пожалуйста средствами разметки сделать анимацию..
Есть три слоя (DIV).
z-index: -1;
z-index: -2;
z-index: -3;
Первый (-1) и третий (-3) слои связаны по одному краю, второй (-2) слой не подвижен и находится между ними. При этом третий (-3) частично спрятан за экраном..
Фактически нужно лишь "раскрыть" спрятанный слой на его ширину, но вместе с тем оставить его связанным с первым слоем, т.е. предвинуть эти оба слоя вместе..
----
Честно сказать, сам уже и так и эдак, но.. Поиск? Приводит к разнообразию произвольных решений, каждое из которых работает, но как ни стараюсь их объединить и применить, это никак не приводит к желаемому результату..
|
|
30.07.2016, 09:07
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Сообщение от donkey
|
|
частично спрятан за экраном..
|
Боится наверно вылезать оттудова.
|
Сообщение от donkey
|
|
слои связаны по одному краю,
|
Мастера художественной вязки на линии.
|
Сообщение от donkey
|
|
и находится между ними
|
Евклид нервно курит: два слоя связаны по одному краю, а третий, находится между ними. Очевидно именно по этой причине он и спрятался за монитором.
ЗЫ Вставляй сюда свой спрятанный див и оба связанных как хтмл код. Тогда будет серьезно. |
|
30.07.2016, 10:13
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
Спасибо за ответ.
<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 не работает, если привязать первый и третий слои друг к другу поместив один в другой и двигать их, средний не будет находится между ними, (когда они начнут перемещение равное высоте нижнего слоя, он должен оставаться на месте)..
Все, что я нашел по скриптам, работает с отделаьными элементами, а вот с парой не связанных элементов.. Знаю, что делаю что-то не так, но вот что именно, не могу понять..
Последний раз редактировалось donkey, 01.08.2016 в 17:07.
|
|
30.07.2016, 18:37
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Ты зачем этой занимаешься? Ну если есть повод отпостить что-то на говнокод.ру, то твой говнокод вполне мотивирует. )))
Во-первых боттом - это бред. Дно есть когда оно есть, а когда ничего нет, скорее всего браузер топает от топа. Во-вторых единицы измерения указывай. И последнее, бери вот этот код как базисно вменяемый и учись дальше. Я сшил твои кувадратики, дальше разберешься почему они сшились.
<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>
|
|
30.07.2016, 18:40
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Да, про самую мякотку забыл. С какого одеколона у тебя z-index негативный? z-index - всегда относительный, то есть он не глобально херачит как думают некоторые оленеводы, а опирается на предка крепко стоящего на ногах. То есть div z-index=1, задаетъ всем отпрыскам такой же, а если какой-то хочет выше, то ставит себе z-index=1 и получается типа 2.
|
|
31.07.2016, 01:09
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Благодарю вас, милейший, но у меня нет "дна" на странице и все элементы на ней закреплены, а прокрутка отсутствует. Засим, мне вовсе не ясно что вы подразумеваете под "сшил" мои элементы, если они мне нужны именно по отдельности и таки да, как сдвинуть два элемента, в данном случае слоя, так чтобы средний остался на месте?
UPD отметил там момент сдвига, в первом сообщении с html..
Последний раз редактировалось donkey, 31.07.2016 в 01:13.
|
|
31.07.2016, 10:59
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Я ж тебе и пишу, что нет у страницы "дна", вертикаль практически бесконечна, поскольку прокрутка присутствует, в том числе в твоем калечном хтмле.
Как и большинство оленеводов, ты понимаешь фразу position:absolute абсолютно, типа от левого верхнего пиксела монитора. На самом деле в хтмле нет ничего абсолютного, там вообще все относительное, в том числе и абсолютные элементы, просто они выпадают из потока и опираются на предка в потоке, если даже этот предок - туловище (body), или космос - html, поскольку html - это такой же элемент под названием htmlElement. Дошло?
Конечно нет. Так вот, чтобы сделать все вообще абслютным, надо пофиксить хтмль намертво, то есть
html{width:100%;height:100%;position:fixed;overflow:hidden;}
Только так можно избавиться от всех прокруток несмотря на любое содержание. А потом уже корежить это содержание так, чтобы оно вообще оказалось внутри пофиксенного хтля. |
|
31.07.2016, 11:08
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Вот смотри, позиции абсолютные, а поля туловища запросто смещают нули в топ и лефт на указанную ширину поля. Понял теперь, что нет там ничего абсолютного? Все остальное в комментах хтмля.
<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>
|
|
31.07.2016, 11:35
|
|
Интересующийся
|
|
Регистрация: 29.07.2016
Сообщений: 16
|
|
|
Простите меня, но каким, простите еще раз, образом это поможет мне показать спрятаную часть слоя №3, сдвинув его на всю его высоту, одновременно с этим сдвинуть слой №1, оставив его привязанным к краю слоя №3, оставив не подвижным слой №2.?
|
|
31.07.2016, 11:41
|
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
|
Тебе поможет скрипт, который будет привязывать квадраты как тебе надо и двигать куда хочешь. Напиши такой скрипт, поскольку сценарий кина есть только у тебя.
|
|
|
|
