在Textarea元素顶部显示DIV

问题描述

我有一个小的“ floating_Note_DIV”，要显示在文本区域的顶部，如图所示。同样，我想在文本区域下方显示一个yellow_DIV，与文本区域的底部边缘齐平。如果我不显示float_Note_DIV，则文本区域会被yellow_DIV刷新（在Image_1中见下文）。

但是，如果我显示float_Note_DIV，则文本区域和yellow_DIV之间会出现一个间隙；即，我在想如果我放置位置：相对，以及顶部和左侧/右侧，我将获得f_N_DIV飞越文本区域。它似乎确实起作用，但是看起来好像在f_N_Div的“足迹”留下的空白处，在Tomato_DIV和yellow_DIV之间的“可能存在”的位置（请参见下面的Image_2）。

如果我使用位置“ Absolute”，它将以整页的形式定位，我期望Tomato_DIV可以移动，因此f_N_DIV将必须以textarea或tomato_DIV的方式定位。任何解决方法？谢谢，所有帮助表示赞赏！！

HTML是：

<div id='tomato_DIV' >   
        <textarea  id="textarea_main" cols="40" rows="3" maxlength="300"></textarea>
    
        <div id="floating_Note_DIV">Your Thoughts!!</div>       
    
        <div id="yellow_DIV"></div>
</div>

相关的CSS是：

#tomato_DIV
{   background-color: tomato;
    padding: 0px 0px 5px 0px;
    width: 310px;   
    border-radius: 5px; }   
#textarea_main
{   Box-sizing: border-Box;
    margin: 5px 5px 0px 5px; padding: 2px;      /*  note: bottom margin is 0 to make flush with yellow div */
    width: calc(100% - 10px); 
    height: 75px; 
    resize: none; outline: none;
    border: 1px solid #737d96;   border-radius: 3px;    }   
#floating_Note_DIV
{   margin: 0px 0px 0px 0px; 
    padding: 0px 2px 0px 0px;
    
    position: relative;                 /* how to do this bit? */
    right: -232px;  
    top: -14px;
            
    width: 70px;    
    height: 11px;
            
    font-size: 8px; font-style: normal; font-weight: bold;  color: black;
    text-align: right;  border: 1px solid #737d96;  }
#yellow_DIV
{   margin: 0px 5px 5px 5px;            /*  note: top margin is 0 to make flush with textarea */
    border: 1px solid grey;
    border-radius: 3px;
    width: calc(100% -10px);
    height: 30px;   background-color: #fdffb6;    }

解决方法

这是您要实现的目标吗？

HTML：：将#floating_Note_DIV元素放在#yellow_DIV中。您可以将其保留在原处，但是设置top CSS属性将很困难。

CSS：

将position的{{1}}属性从#floating_Note_DIV更改为relative。
将absolute的{{1}}属性设置为position。
将#yellow_DIV设置为relative。
将right设置为0。
我将bottom修改为100%以使其完美对齐。

margin-bottom

5px

css-position html textarea textarea