Как я могу заставить детского элемента избежать родителя с переполнением: скрыто, не сломав мой макет? ⇐ Html

[Anonymous]

Я работаю над макетом, где родительский элемент имеет следующие свойства:

Код: Выделить всё

.parent {
position: relative;
height: 350px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: center;
}

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

Код: Выделить всё

activity name

и ребенок css:
.child {
position: absolute;
padding: 5px 10px;
min-width: 50%;
color: #fff;
background: rgb(255, 145, 0);
top: 0;
right: -15px;
z-index: 1;
border-radius: 10px 0 0 10px;
font-weight: bolder;
}
< /code>
В настоящее время дочерний элемент вырезан и не появляется вне родителя. /> То, что я ищу, - это способ: < /p>

Позвольте ребенку сбежать из родителей и появиться за пределами его границ. < /li>
Соберите переполнение: скрытый < /code> на родителе, так что другие элементы, такие как изображения, не разбиваются или не переполняются неожиданно. это?

Подробнее здесь: https://stackoverflow.com/questions/794 ... ithout-bre