Есть код,не могу понять почему не получается отодвинуть popup__close на 10px От верха и от края, top:10px;right:10px; не работает?

Question

[Anterro]

код

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Popins', sans-serif;
	list-style: none;
	text-decoration: none;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #d2691e;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 8%;
	box-shadow: 0 5px 10px black;
}

.page {
	height: 100vh;
	padding-top: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #808080;
}

.header__logo {
	width: 200px;
	height: 100px;
}

.header__logo {
	transition: 0.5s;
}

.header__logo:hover {
	transform: scale(1.2);
}

.search-form {
	border: 2px solid rgba(16, 16, 16);
	display: inline-flex;
	justify-content: space-between;
	height: 25px;
	border-radius: 10px;
	overflow: hidden;
}

.search-form__txt {
	width: 160px;
	border: none;
	outline: none;
	background-color: transparent;
}

.popup__content {
	display: flex;
	justify-content: end;
}

.popup__close {
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	color: #fffacd;
	position: absolute;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 10;
}

header nav ul li {
	position: relative;
	float: left;
}

header nav ul li a {
	padding: 15px;
	color: black;
	font-size: 16px;
	display: block;
}

header nav ul li a:hover {
	background: #16101c;
	color: #fffacd;
}

nav ul li ul {
	position: absolute;
	left: 0;
	width: 180px;
	background: #d2691e;
	display: none;
}

nav ul li ul li {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li:hover > ul {
	display: initial;
}

.wrapper {
	width: 420px;
	background: #fdeaa8;
	color: #16101c;
	border-radius: 10px;
	padding: 30px 40px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(20px);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.wrapper h1 {
	font-size: 36px;
	text-align: center;
}

.wrapper .input-box {
	position: relative;
	width: 100%;
	height: 50px;
	margin: 30px 0px;
}

.input-box input {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 40px;
	font-size: 16px;
	padding: 20px 45px 20px 20px;
}

.input-box i {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
}

.wrapper .remember {
	display: flex;
	justify-content: space-between;
	font-size: 14.5px;
	margin: -15px 0px 15px;
}

.remember label input {
	accent-color: #fff;
	margin-right: 3px;
}

.remember a {
	color: black;
}

.remember a:hover {
	color: #a52a2a;
	text-decoration: underline;
}

.wrapper .btn {
	width: 100%;
	height: 45px;
	border: none;
	background: #cc7722;
	outline: none;
	border-radius: 40px;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
}

.wrapper .register-link {
	font-size: 14.5px;
	text-align: center;
	margin-top: 20px;
}

.register-link p a {
	color: black;
	font-weight: 600;
}

.register-link p a:hover {
	color: #a52a2a;
}

Comments

[VoidVolker]

Anterro https://qna.habr.com/help/rules#3.8 и уберите лишние теги, не относящиеся к CSS.

[Ankhena]

Сейчас в вашем коде для popup__close вообще нет ничего, что могло бы его отодвигать.

Что сделать?
1. Уберите лишний код из вопроса.
2. Добавьте необходимую разметку. Потому что не зная родительских тегов бесполезно пытаться угадать где ошибка.
3. Уберите код в спойлеры. Предварительно обернув его в теги code, можно использовать кнопки редактора, оч удобно.
4. Сделайте песочницу с необходимым и достаточным для описания проблемы кодом на сервисах типа codepen.io, прикрепите ссылку к вопросу.

Потом позовите.

[Ankhena]

Я видела вашу песочницу из дубля вопроса.
Если в неё добавить top:10px; right:10px;, то всё прекрасно будет работать.

[Anterro]

Ankhena, тогда значит из кода выше что то блокирует, не могу понять что, какое то свойство css

[Ankhena]

Anterro, ещё раз: значит, нужно сделать песочницу с видимой проблемой или дать ссылку на сайт.

[ProjectSoft]

Anterro,
Вам ответили

Если в неё добавитьtop:10px; right:10px;, то всё прекрасно будет работать.

О чём же говорит ваш вопрос?

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

Перечитайте ответ, который вам дали.
Ещё не поняли? Тогда снова по кругу....