Html 在Textarea元素顶部显示DIV

我有一个小的“floating\u Note\u DIV”，我想显示在文本区域的顶部，如图所示。同样，我想在textarea下面显示一个黄色的_DIV，与textarea的底边齐平。如果我不显示浮动的\u Note\u DIV，文本区域将被黄色的\u DIV刷新（如下图所示）。

但是，如果我显示浮动的\u Note\u DIV，文本区域和黄色的\u DIV之间会出现一个间隙；i、 例如，我在想，如果我把position:relative、top和left/right放在上面，我会让f_N_DIV飞越文本区域。这似乎是可行的，但看起来在f_N_Div的“足迹”留下的地方留下了一个缺口，在番茄_Div和黄色_Div之间的“应该”位置（见下图2）。

如果我使用position“Absolute”，它将被定位到整个页面的w.r.t位置，我希望番茄DIV会四处移动，因此f\u N\u DIV必须被定位到文本区域或番茄DIV的w.r.t位置。 有解决办法吗？谢谢，谢谢大家的帮助

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>  

---

这就是你想要达到的目标吗

HTML:将

#floating#u Note_DIV

元素放入

#yellow_DIV

中。您可以将它保留在原来的位置，但是设置

top

CSS属性会很困难

CSS:

将

浮动注释DIV的
位置
属性从
相对
更改为
绝对

将

黄色分区的
位置
属性设置为
相对

将

right

设置为

0

将

底部设置为
100%

我将

margin-bottom

修改为

5px

，使其完全对齐

番茄酱{ 背景色：番茄； 填充：0px 0px 5px 0px； 宽度：310px； 边界半径：5px； } #text主区域{ 框大小：边框框； 保证金：5px 5px 0px 5px； 填充：2px； /*注：底部边距为0，与黄色div齐平*/ 宽度：计算（100%-10px）； 高度：75px； 调整大小：无； 大纲：无； 边框：1px实心#737d96； 边界半径：3px； } #浮动票据{ 保证金：0px 0px 5px 0px； 填充：0px 2px 0px 0px； 位置：相对位置； 位置：绝对位置； 右：0； 底部：100%； 宽度：70px； 高度：11px； 字号：8px； 字体风格：普通； 字体大小：粗体； 颜色：黑色； 文本对齐：右对齐； 边框：1px实心#737d96； } #黄色分区{ 保证金：0px 5px 5px 5px； /*注：上边距为0，以便与textarea齐平*/ 边框：1px纯灰； 位置：相对位置； 边界半径：3px； 宽度：计算（100%-10px）； 高度：30px； 背景色：#fdffb6； }

你的想法！！

谢谢，它确实有效！即使我在黄色的DIV中添加了额外的P元素，F_N_DIV仍然保持在文本区域的右下角。但我不明白的是，有两件事：I）当我尝试绝对定位时，它将f_N_DIV“绝对”定位到整个浏览器窗口，你是如何将其锁定为黄色的，还有ii）底部是100%，这是指什么。。f_N_D的底边带有。。。如果你能解释，那就太好了！或者给我指个我能读的地方。。非常感谢你，普拉纳夫！我很抱歉在发帖时没有解释。对于您的第一个问题，答案是，我将父级

#yellow_DIV

定位为

relative

。我在发帖时也忘了提到这一点。原因是绝对定位的元素是根据最近定位的祖先定位的。之前，没有定位祖先元素。这就是为什么它是相对于浏览器窗口定位的。对于第二个问题，解释是元素根据底边移动，100%等于

#yellow_DIV

的高度。为了更好的理解，你必须用谷歌搜索东西。哇，普拉纳夫，非常感谢！！我从来都不知道父div必须被定位，而且关于祖先的定位会级联到元素。让它变得清晰，学到了一些新的东西。我会计算出100%。。再次感谢你，伙计。。干杯欢迎光临。别忘了把答案标为正确。干杯

#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;    }