I have a div anchored to the top of the page using "position: sticky", also have a div below which is editable (contenteditable="true") and it has lots of lines.
Please see the code snippet below:
.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>If I use arrow Down in keyboard to move cursor to the very bottom, then use arrow UP in keyboard to move the cursor all the way up, the cursor will eventually move into the top div area and thus be hidden, making typing invisible.
What I want to achieve is: