Расположение элементов с помощью CSS внутри карты ⇐ CSS

[Гость]

i have a problem with the positioning of elements in the card. I would like that the elements inside the class "top-right-element" are placed in the top right corner while the button with the pi-chevron-up is placed in the bottom left corner. This is the html code.

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

{{item.id}}









[i][/i]




{{expanded ? item.description : item.description.slice(0,10)}}

This is the css:

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

.bottom-right-button {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px; /* Optional: Adjust as needed */
margin-right: 10px; /* Optional: Adjust as needed */
}

.top-right-element {
position: absolute;
top: 0;
right: 0;
margin-top: 10px; /* Optional: Adjust as needed */
margin-right: 20px; /* Optional: Adjust as needed */
}

.input-container {
position: relative;
//margin-left: auto;
}

.customCard {
margin-left: 0.25rem;
margin-right: 0.25rem;
background-color: #ffffff;
color: #696969;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
}

The elements are positioned correctly at the beginning, but when I click the button to expand the text of the card and then close it, the entire card disappears. There are issues with the positioning of the elements. Can anyone help me?


Источник: https://stackoverflow.com/questions/781 ... nside-card