Как превратить изгиб-элемент в абсолютно позиционированный элемент, чтобы сохранить его позиционирование ⇐ CSS

[Anonymous]

У меня есть такая макет, которая в основном 3 столбца. Я пытаюсь придумать CSS для .subsections-sidebar , чтобы показать его либо в режиме закрепленного, либо в плавающем режиме. В плавающем режиме мне нужно. Позиция: Absolute , но проблема в том, что в этом случае она больше не является гибкой, поэтому он теряет его позиционирование после. Состояния. Sidebar и теряет растяжение, поэтому мне нужно лечить хард-код и ширину
, каковы другие варианты? />

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

Title

body {
margin: 0;
padding: 0;
}

.container {
width: 100dvw;
height: 100dvh;
display: flex;
}

.sections-sidebar {
flex: 0 0 200px;
overflow: hidden;
background-color: #c5d3ef;
}

.subsections-sidebar {
flex: 0 0 0;
overflow: hidden;
background-color: #daaaaa;

transition: flex-basis 0.3s ease;

&.expanded {
flex-basis: 200px;
}

&.pinned {
flex-basis: 200px;
}
}

.content {
flex-grow: 1;
background-color: #bad2b0;
}

.layout-content {
display: flex;
flex-direction: column;
height: 100%;
}

.content-header {
flex: 0 0 50px;
overflow: hidden;
background-color: #d3a1e2;
}

.content-body {
flex-grow: 1;
background-color: #bfbfbf;
overflow: auto;
}



setTimeout(() => {
const sectionsSidebar = document.querySelector('.subsections-sidebar');
sectionsSidebar.classList.add('expanded');
}, 1000);






111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111


222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222




3


4

Подробнее здесь: https://stackoverflow.com/questions/796 ... ositioning