位置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

はこれを試してみてください：

代わりinnerboxのouterboxにposition: relativeを適用し、typeboxのabsolute位置を保つ（私が説明のために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は、入力ボックスの直接の親ですなぜ、位置：相対的なは、内部ボックスのために働かないのですか？ – Learner

位置divを他の移動するものと相対的に固定する方法

答えて

関連する問題