HTML, CSS - Размещение элемента Div внутри контейнера Div

Question

Итак, у меня есть маленький кружок div с надписью «запрос приглашения», который находится внутри большего контейнера div.

Я хочу, чтобы кружок #request-invite div располагался в очень конкретном месте (но все же гибкий и перемещение с изменением размера окна браузера).

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

Вот что у меня есть: https://jsfiddle.net/t0j9hwos/

css, с которым я борюсь:

#request-invite {
  position: absolute;
  margin: 0 auto;
  top: -10px;
  left: 860px;
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  color: #d31027;
  vertical-align: middle;
  font-size: 22px;
  transform: rotate(10deg);
}

Любые идеи, как я могу получить расположение круга #request-invite div, как я хочу?

Спасибо, Джо sh

Answer 1

Вы можете использовать vw для ширины области просмотра (в процентах), а затем отрегулировать ее, используя такие поля:

position: absolute;
top: 0;
margin-top: -10px;
left: 50vw;
margin-left: 20px;

jsfiddle Demo на основе вашего кода

Answer 2

Очевидно, ваше нынешнее решение подходит для конкретной ширины окна. Допустим, ширина окна составляет 1200 пикселей. Таким образом, вы можете преобразовать ваши left: 860px; в относительные измерения - относительно ширины окна. Первым выбором будет процентное соотношение.

Итак, вы вычисляете, какой процент 860 пикселей соответствует 1200 пикселей (ваша предполагаемая ширина окна - замените это фактическим значением ширины). 860: 1200 равно 0,716666 ..., то есть 71,66666 процентов.

Итак, вместо left: 860px; вы теперь используете left: 71,6666%; или, может быть, даже лучше left: 71,6666vw;. Как я уже сказал, замените 1200 на вашу фактическую ширину окна (при которой позиционирование работает по желанию) при вычислении этого значения.

Answer 3

Я не вижу кружка в вашем примере кода.

Насколько я понимаю, position:fixed или position:sticky могут быть тем, что вы ищете.

См.: https://developer.mozilla.org/en-US/docs/Web/CSS/position