Как сделать объект поверх другого css

html — эффект наведения: сделать один div поверх другого div

Я хочу создать следующий эффект наведения: при hover один div (.left) должен расширяться до полной ширины и покрывать другой div (.right) .

Объяснение / Требования:

Изображение имеет соотношение сторон 1:1. Высота div .container должна определять высоту изображения, которое, в свою очередь, должно иметь ширину 33% от div .container.

Проблемы

Почему изображение сдвигается вниз, хотя его z-index установлен в -1 ?

Я пробовал несколько разных подходов, которые нашел в Интернете, но они не работают в моем случае.

Например, я не хочу устанавливать позицию div .right в position: absolute , поскольку я игнорирую заполнение div .container .

Как сделать так, чтобы игровой объект оставался поверх другого?

По сути, я хочу, чтобы управляемый игрок мог нести другого игрока на голове и при этом мог прыгать так же высоко. В версии игры Jam я просто установил массу твердого тела равной нулю и сделал скорость такой же, как у куба под ним. Но теперь, если я это сделаю, всякий раз, когда я двигаюсь, игрок сверху будет чрезвычайно быстро и телепортируется. Не совсем то, что я хотел.

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

Вдобавок всякий раз, когда верхний куб падает на нижний куб в воздухе, верхний почти ударяет нижний о землю — они падают очень быстро .

Я хочу, чтобы верхний куб хорошо сидел на нижнем БЕЗ ПОДЪЕМА ВЫШЕ НИЖНЕГО КУБА , просто сидел на нем, не совершая прыжок ниже, но чтобы также легко удаляется блоком, отталкивающим его, а нижний игрок прыгает под него.

РЕДАКТИРОВАТЬ : попытка родительского контроля куба не сработала, вместо этого у меня возникли странные сбои.

РЕДАКТИРОВАТЬ 2 : я попробовал FixedJoint2D с немного другой настройкой, и иногда он работает, но иногда он ломается без причины и движение странное. Типа . Ты не должен прыгать так высоко. Код:

jumping way too high

4 ответа

Я думаю, что исправил! На это потребовалось время — на самом деле 11 дней. В основном у меня есть его скорость, пока он находится на игроке (с помощью rb.AddForce(new Vector2(rb.velocity.x * -50f, rb.velocity.y * -50f)); . Я также добавляю больше силы в зависимости от того, сколько игроков находится сверху игрока (путем умножения силы прыжка на одну силу больше, чем у игроков сверху), и я заставил его подождать кадр после приземления перед прыжком. Это предотвращает снижение прыжков при прыжках на более высокую платформу и сразу же с нее. В основном я собираюсь скопировать соответствующий код.

Сначала вам нужно превратить верхний куб в кинематический с помощью скриптов, затем вам понадобится ссылка на нижний куб, чтобы получить его Rigidbody.position, пусть TopCube.Rigidbody.position = BottomCube.rigidbody.position + offset, с offset = new вектор 3 (0, высота TopCube / 2 +0,01,0) (+ 0,01, чтобы они не перекрывали друг друга). когда вы прекратите перенос, просто верните Top Cube в динамический.

Я думаю, вы хотите изучить FixedJoint .

Фиксированные соединения ограничивают движение объекта зависимостью от другого объекта. Это несколько похоже на Родительство, но реализуется через физику, а не иерархию преобразования. Наилучшие сценарии их использования — это когда у вас есть объекты, которые вы хотите легко отделить друг от друга, или соединить движение двух объектов без родительского контроля.

Как можно DIV разместить поверх другого DIV-а с определённым смещением?

Здравствуйте, подскажите пожалуйста.
У меня в Drupal-е рисуется карта, шириной 100%, а для этой карты есть блок фильтра, который находится выше неё.
Рабочая область сайта рассчитана на ширину в 1260px, а блок фильтра будет 300px

Как можно этот блок наложить сверху на карту, таким образом, чтобы он был с координатами относительно центра смещён влево (получается) на -630px

Получается самое тупое, это сначала выровнять его по центру с помощью margin-left,right: auto;
а как потом ещё смещение сделать?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *