Положение деления шкалы с окном просмотра - PullRequest
Новая
       8

Положение деления шкалы с окном просмотра

1 голос
/ 02 апреля 2020

Я работаю на месте игры разницы.

Пока у меня есть изображение с разницей, показанной красным кружком для тестирования.

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

Мне нужна помощь, чтобы точка оставалась в красном круге при изменении размера окна браузера.

Вот ссылка на мой JSFIDDLE с кодом ниже

CSS: 

.position001{position:relative}.block001{position:absolute;top:50px;left:673px;background-color:#7fffd4;border-radius:50%}.button001{background-color:transparent;border:1px solid transparent;width:45px;height:42px}.hide001{outline:0;border:none}

HTML

image

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Это может помочь вам начать работу!

Вы должны использовать height и width в vw, поскольку экран меняется, а размер круга также должен совпадать с портом просмотра .

Во-вторых, вы можете использовать Media query, однако я не думаю, что это целесообразный вариант для вас, если только вы не очень хорошо обрабатываете медиа-запросы при изменении разрешения экрана, вместо того, как предложено в моем ответе вам можно использовать vw для высоты, ширины и правильно разместить другой круг, остальное свойство позаботится об этом. 

.position001 {
  position: relative;
}

.block001 {
  position: absolute;
  background-color: aquamarine;
  border-radius: 50%;
  top: 9.2%;
  left: 61.4%;
  width: 5vw;
  height: 5vw;
}

.button001 {
  background-color: transparent;
  border: 1px solid transparent;
  width: 45px;
  height: 42px;
}

.hide001 {
  border: none;
  outline: none;
}
image
0 голосов
/ 02 апреля 2020

Вы должны поместить синюю точку и красный круг под элементом div. Затем пусть позиция div будет relative, а точка и окружность absolute. Затем вы можете позиционировать div, чтобы разместить как красный круг, так и синюю точку. Они всегда будут находиться в одной и той же области друг над другом.

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

Графика демонстрации здесь: https://css-tricks.com/how-to-stack-elements-in-css/

...