如何保持一個div相對於其他移動位置的位置？

即使聊天室上下滾動，我也想保持#typebox的位置不變。如何保持一個div相對於其他移動位置的位置？

我已經嘗試保持位置：#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> \t \t <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>

來源

2016-10-13 Learner

試試這個：

應用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> \t \t <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>

來源

2016-10-13 12:06:56 kukkuz

@shuchi讓我知道你對此的看法？謝謝！ – kukkuz

謝謝你，先生，這幫了我。 – Learner

如果我錯了，請糾正我 - innerbox是typebox的直接父級，那麼爲什麼position：relative不適用於innerbox？ – Learner

如何保持一個div相對於其他移動位置的位置？

回答

相關問題