Question

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

我试过保持位置：相对于#innerbox（它是#typebox的容器）和位置：绝对的#typebox但是这不符合要求。

我也尝试保持位置：固定为#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>

Answer 1

试试这个：

将position: relative应用于outerbox代替innerbox并保持absolute typebox的定位（我已将bottom: 50px用于说明）< / p>

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

如何保持位置一个div固定相对于其他移动的？

1 个答案: