在 Textarea 元素顶部显示 DIV

Question

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

但是，如果我显示 floating_Note_DIV，textarea 和 yellow_DIV 之间会出现间隙；即，我在想，如果我放置 position: relative、top 和 left/right，我会让 f_N_DIV 飞过文本区域。它似乎确实有效，但它看起来像 f_N_Div 的“足迹”留下的间隙，在 tomato_DIV 和 [=29= 之间的“应该”位置]（见下文 Image_2）。

如果我使用位置“绝对”，它会定位到整个页面 w.r.t，我希望 tomato_DIV 移动，因此必须定位 f_N_DIV w.r.t 文本区域或 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;    }

Answer 1

这是您要实现的目标吗？

HTML : 将 #floating_Note_DIV 元素放在 #yellow_DIV 中。你可以把它留在原处，但是设置 top CSS 属性会很困难。

CSS :

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

#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 5px 0px;
  padding: 0px 2px 0px 0px;
  position: relative;
  position: absolute;
  right: 0;
  bottom: 100%;
  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;
  position: relative;
  border-radius: 3px;
  width: calc(100% -10px);
  height: 30px;
  background-color: #fdffb6;
}

<div id='tomato_DIV'>
  <textarea id="textarea_main" cols="40" rows="3" maxlength="300">
  </textarea>

  <div id="yellow_DIV">
    <div id="floating_Note_DIV">Your Thoughts!!</div>
  </div>
</div>

在 Textarea 元素顶部显示 DIV

Displaying a DIV on top of a Textarea element

html

textarea

css-position