Tengo un div anclado en la parte superior de la página usando "posición: pegajosa", también tengo un div debajo que es editable (contenteditable="true") y tiene muchas líneas.
Por favor, vea el fragmento de código a continuación:
.scrollable { padding: 0.5em; box-sizing: border-box; } .top { position: sticky; top: 0; z-index: 2; background-color: yellow; } <html> <body> <div class="top"> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> sticky line<br/> </div> <div contenteditable="true" class="scrollable" data-placeholder="Click here to type"> the first line<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> f<br/>dfsd<br/> ds<br/> fsd<br/> f<br/> dfsd<br/> ds<br/> fsd<br/> the last line<br/> </div>Si uso la flecha hacia abajo en el teclado para mover el cursor hasta el fondo, luego uso la flecha hacia arriba en el teclado para mover el cursor hacia arriba, el cursor finalmente se moverá al área div superior y, por lo tanto, se ocultará, haciendo que escribir sea invisible.
Lo que quiero lograr es: