Как сохранить значок редактирования, всегда видимой внизу нот? ⇐ Html

[Anonymous]

let add = document.querySelector('.add');
let newDiv = document.querySelector('.new-note');
let close_btn = document.querySelector('.close-btn');
let create_btn = document.querySelector('.create-note');
let text_area = document.querySelector('textarea');
let text = '';
let edit = document.createElement('i');
edit.className = 'fa-solid';
let container = document.querySelector('.container');

add.addEventListener('click', () => {
newDiv.style.display = 'block';
});

close_btn.addEventListener('click', () => {
newDiv.style.display = 'none';
});

create_btn.addEventListener('click', () => {
newDiv.style.display = 'none';
let newNote = document.createElement('div');
newNote.textContent = text_area.value;
newNote.className = 'notes';
newNote.appendChild(edit);
container.appendChild(newNote);
});< /code>
* {
box-sizing: border-box;
}

body {
background-image: linear-gradient(to right,#8c53ff,#725f97);
display: flex;
height: 96vh;
justify-content: center;
align-items: center;
}
.container {
width: 853px;
height: 600px;
border: 1px solid white;
background-color: white;
border-radius: 8px;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}

.add {
width: 237px;
height: 241px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #f9f9f9;
margin-left: 6%;
margin-top: 2%;
display: flex;
align-items: center;
justify-content: center;
}
.add:hover {
background-color: rgb(239, 238, 238);
}
.fa-duotone {
font-size: 85px;
font-weight: 800;
color: gainsboro;
font-family: "Font Awesome 6 Free";
font-style: normal;
}

.new-note {
width: 441px;
height: 341px;
border: 1px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: absolute;
top: 20%;
left: 36%;
border-radius: 10px;
background-color: white;
display: none;
z-index: 1;
}

.new-note h1 {
margin-left: 36%;
}

textarea {
width: 300px;
height: 144px;
border: 2px solid #8c53ff;
padding: 12px;
margin-left: 18%;
border-radius: 10px;
}

.create-note {
background-color: #8c53ff;
color: white;
border: none;
margin-left: 120px;
margin-top: 16px;
}
.close-btn {
height: 36.8px;
width: 100px;
background-color: gainsboro;
border: none;
color: white;
margin-left: 8px;
}

.create-note,.close-btn {
font-size: 14px;
width: 100px;
height: 36.8px;
border-radius: 5px;
}

.blank-div1,.blank-div2 {
height: 240px;
width: 240px;
background-color: gainsboro;
}

.notes {
height: 240px;
width: 240px;
background-color: #fff385;
border-radius: 10px;
box-shadow: 9px 9px 18px #b3b3b3;
overflow-y: auto;
padding: 18px;
margin-left: 4%;
margin-top: 2%;
position: relative;
}

.fa-solid {
position: absolute;
}

@media only screen and (max-width: 600px) {
body {
height: 84vh;
}
.container {
width: 408px;
height: 440px;
}
.add {
width: 186px;
height: 182px;
top: 21%;
left: 8%;
border-radius: 15px;
}
.new-note {
left: 1%;
width: 424px;
}
}< /code>





Document









New Note

Create Note
Close



< /code>
< /div>
< /div>
< /p>
Я работаю над приложением Simple Notes, где пользователи могут создавать заметки, и каждая нота имеет кнопку «Редактировать и удалить». Предполагается, что кнопка «Редактировать» всегда видна внутри каждой ноты, но по какой -то причине она не отображается, как ожидалось. Я должен прокрутить внизу каждой ноты, чтобы появился значок редактирования. () Чтобы добавить кнопку «Редактировать» () в недавно созданную ноту, но она не является неизменно видимым.
Использование CSS для его размещения - я попытался установить положение: абсолютно внутри примечания, чтобы поместить кнопку «Редактировать», но это все еще исчезает, когда Содержание растет.
Добавление отдельного пролета для текста - я обернул содержимое ноты внутри A и попытался установить свою высоту меньше, чем Div Note, надеясь оставить пространство для кнопки редактирования, но оно не оказало эффекта. Br /> с использованием Flexbox /Grid-я попытался использовать Display: Flex и Levifie-Content Properties, но кнопка все еще неожиданно движется. Примечание, независимо от размера содержания?


Подробнее здесь: https://stackoverflow.com/questions/794 ... m-of-notes