html - 如何使一个div的位置相对于其他移动的位置固定？

即使聊天框在上下滚动时移动，我也希望将#typebox固定在其位置上。

我已经尝试保持#innerbox的position：relative（它是#typebox的容器）和#typebox的position：absolute，但这不符合要求。

我还尝试过保持位置：固定为#typebox，但是这也消失了#typebox和滚动条。

我尝试参考其他类似的问题，但找不到我在做什么错。
任何帮助，将不胜感激：）

#outerbox {
  width: 300px;
  height: 500px;
  border-radius: 25px;
  padding: 10px;
  border: 2px solid DodgerBlue;
  margin: 20px;
  box-shadow: 10px 10px 5px grey;
}
#innerbox {
  width: 240px;
  height: 440px;
  padding: 10px;
  border: 2px solid DodgerBlue;
  margin: 20px;
  background-image: url("allo.gif");
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
#chatbox1 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #0097A7;
  margin-top: 100%;
  margin-right: 50%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox2 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-left: 30%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox3 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-right: 30%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox4 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-left: 30%;
  color: #FFFFFF;
  text-align: center;
}
#typebox {
  width: 200px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: 2px solid white;
  box-shadow: 5px 5px 2px grey;
  margin-top: 50%;
  position: absolute;
  background-color: #FFFFFF;
  color: #808080;
}

<body>

  <div class="container-fluid">

    <div class="row">

      <div class="col-md-4" "col-xs-4"></div>
      <div class="col-md-4" "col-xs-4">
        <h1>Vaas</h1>
      </div>
      <div class="col-md-4" "col-xs-4"></div>

    </div>


    <div class="row">

      <div class="col-md-4" "col-xs-4"></div>
      <div class="col-md-4" "col-xs-4" id="outerbox">
        <div id="innerbox">

          <div id="chatbox1"></div>

          <div id="chatbox2"></div>

          <div id="chatbox3"></div>

          <div id="chatbox4"></div>
          <div id="typebox">
            <i class="fa fa-plus" style="color:#00BFFF; padding-right:3px;" aria-hidden="true"> Say something...</i>
            <i class="fa fa-smile-o" style="color:#808080;padding-left:30px; padding-right:5px;" aria-hidden="true"></i>		<i class="fa fa-microphone" style="color:#808080;" aria-hidden="true"></i>
          </div>

        </div>

      </div>
      <div class="col-md-4" "col-xs-4"></div>

    </div>

  </div>

</body>

最佳答案

尝试这个：

将position: relative应用于outerbox而不是innerbox并保持absolute的typebox位置（我已给出bottom: 50px作为说明）

#outerbox {
  width: 300px;
  height: 500px;
  border-radius: 25px;
  padding: 10px;
  border: 2px solid DodgerBlue;
  margin: 20px;
  box-shadow: 10px 10px 5px grey;
  position: relative;
}
#innerbox {
  width: 240px;
  height: 440px;
  padding: 10px;
  border: 2px solid DodgerBlue;
  margin: 20px;
  background-image: url("allo.gif");
  overflow-y: auto;
  overflow-x: hidden;
}
#chatbox1 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #0097A7;
  margin-top: 100%;
  margin-right: 50%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox2 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-left: 30%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox3 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-right: 30%;
  color: #FFFFFF;
  text-align: center;
}
#chatbox4 {
  width: 140px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: #009688;
  background-color: #00BCD4;
  margin-top: 10%;
  margin-left: 30%;
  color: #FFFFFF;
  text-align: center;
}
#typebox {
  width: 200px;
  height: 8%;
  border-radius: 25px;
  padding: 10px;
  border: 2px solid white;
  box-shadow: 5px 5px 2px grey;
  margin-top: 50%;
  bottom: 50px;
  position: absolute;
  background-color: #FFFFFF;
  color: #808080;
}

<body>

  <div class="container-fluid">

    <div class="row">

      <div class="col-md-4" "col-xs-4"></div>
      <div class="col-md-4" "col-xs-4">
        <h1>Vaas</h1>
      </div>
      <div class="col-md-4" "col-xs-4"></div>

    </div>


    <div class="row">

      <div class="col-md-4" "col-xs-4"></div>
      <div class="col-md-4" "col-xs-4" id="outerbox">
        <div id="innerbox">

          <div id="chatbox1"></div>

          <div id="chatbox2"></div>

          <div id="chatbox3"></div>

          <div id="chatbox4"></div>
          <div id="typebox">
            <i class="fa fa-plus" style="color:#00BFFF; padding-right:3px;" aria-hidden="true"> Say something...</i>
            <i class="fa fa-smile-o" style="color:#808080;padding-left:30px; padding-right:5px;" aria-hidden="true"></i>		<i class="fa fa-microphone" style="color:#808080;" aria-hidden="true"></i>
          </div>

        </div>

      </div>
      <div class="col-md-4" "col-xs-4"></div>

    </div>

  </div>

</body>