バグ<select>すべて

Question

の上にあるべきdiv要素の上に浮いは私が問題を抱えています。 3つの左の列（の私のウェブサイト上で 、）私はいくつかのフィルタとのパネルを持っている - フィルタがで作られて、

フィルタパネルは、次のようになります。私には

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Filter Panel --> 
 
<div id="filterPanelDiv" class="row"> 
 
    <div id="filterPanelDiv2" class="col-xs-10 col-xs-offset-1 well"> 
 
     <p class="filterPanel_title">Filteri:</p> 
 
     <!-- Filter - Grad --> 
 
     <div class="form-group smallerTopMargin"> 
 
      <select class="selectpicker show-tick show-menu-arrow option form-control" data-live-search="true" title="Grad..."> 
 
       <option class="filterPanel_option">Beograd</option> 
 
       <option class="filterPanel_option">Čačak</option> 
 
       <option class="filterPanel_option">Ritopek</option> 
 
      </select> 
 
     </div> 
 
     <!-- Filter - Kompanija --> 
 
     <div class="form-group smallerTopMargin"> 
 
      <select class="selectpicker show-tick show-menu-arrow option form-control" data-live-search="true" title="Kompanija..."> 
 
       <option class="filterPanel_option">Microsoft</option> 
 
       <option class="filterPanel_option">Nordeus</option> 
 
       <option class="filterPanel_option">McDonald's</option> 
 
      </select> 
 
     </div> 
 
     <!-- Clear filters button --> 
 
     <div class="row text-center"> 
 
      <button id="clearFilters" class="btn btn-danger filterPanel_clearBtn" style="color:#2a2b35">Očisti filtere</button> 
 
     </div> 
 
    </div> 
 
</div>

私はまた、画面の左下隅に配置されたDIV「オンラインサポート」を持っているウェブサイトは、それは次のようになります。

<!-- Chatbox --> 
 
<div class="chatbox" style="position:fixed;bottom:0;margin-left:1em;width:30%;"> 
 
    <div class="panel panel-success"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Podrška uživo - online</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <!-- Incoming message --> 
 
      <div class="row" style="display: flex;align-items: center;"> 
 
       <img src="img/support.png" style="width:3em;margin-left:1em;margin-right:1em;" /> 
 
       <p style="font-size: 1.3em;text-align:left;padding-left:0.8em;padding-top:0.4em;padding-bottom:0.4em;margin-right:3.5em;background-color:#e9e9e9;border-radius:0.4em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales vitae nisi id elementum. Sed dictum eros ex, in auctor risus pretium vitae.</p> 
 
      </div> 
 
      <!-- Outgoing message --> 
 
      <div class="row" style="display: flex;align-items: center;"> 
 
       <p style="font-size: 1.3em;text-align:left;padding-left:0.8em;padding-top:0.4em;padding-bottom:0.4em;margin-right:1em;margin-left:6em;background-color:#f2f2f2;border-radius:0.4em;">Ut sollicitudin libero dignissim, sodales eros sit amet, porttitor est.</p> 
 
      </div> 
 
      <!-- Incoming message --> 
 
      <div class="row" style="display: flex;align-items: center;"> 
 
       <img src="img/support.png" style="width:3em;margin-left:1em;margin-right:1em;" /> 
 
       <p style="font-size: 1.3em;text-align:left;padding-left:0.8em;padding-top:0.4em;padding-bottom:0.4em;margin-right:3.5em;background-color:#e9e9e9;border-radius:0.4em;">Praesent egestas vehicula dui at vestibulum. Nulla hendrerit pretium arcu hendrerit cursus.</p> 
 
      </div> 
 
     </div> 
 
     <div class="panel-footer"> 
 
      <div class="form-group" style="margin:0;padding:0;"> 
 
       <input type="text" class="form-control" id="inputEmail" placeholder="Ukucajte poruku..." style="margin:0;width:96%;margin-left:2%;"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

私のスタイルですべての私のCSSを入れて申し訳ありません=「」... ポイントがある - 私はページをロードするとき、「オンラインサポート - chatboxフィルタパネル」「divが上に浮い」が、タグがあります"オンラインサポート - チャットボックス"の上に浮いているdiv： site when loaded

「フィルタパネル」と「チャットボックス」のdivが重複していないため、少し下にスクロールしても問題ないようです。

これはなぜ起こっているのですか？

フィルタパネルは「コンテナ流体」にあり、「オンラインサポート - チャットボックス」はありません。

ありがとうございました！ 乾杯

Answer 1

問題はKompanijaフィルターがtitle属性を持ち、タイトルタグが何らかの理由で表示されることです。

最も可能性の高い理由は、マウスが、title属性を表示させているフィルタにマウスを乗せている可能性があります。

あなたがいずれかを実行できます。

1. 選択タイトルが常に現れている<select class="selectpicker show-tick show-menu-arrow option form-control" data-live-search="true" title="Kompanija..." onmouseover="this.title='';">