css абсолютный элемент спрятан переполнением: auto

Когда я навещу ссылку, появится absolute pseudo element.css абсолютный элемент спрятан переполнением: auto

Я делаю div overflow-y: scroll, те pseudo element внешний вид не может показать, они все еще использовали позицию без scroll вычисляли.

У Chrome есть эта проблема, Firefox работает хорошо.

Вот два изображения:

 
 
.blog .widget-panel { 
 
    height: 400px; 
 
    width: 200px; 
 
    margin: 20px; 
 
    position: fixed; 
 
} 
 

 
.blog .widget-panel > div { 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 100%; 
 
} 
 

 
.blog .widget-panel .tag-box .tag-block { 
 
    display: block; 
 
    line-height: 28px; 
 
    border-bottom: 1px dotted rgba(0,0,0,0.1); 
 
    padding: 7px; 
 
    color: #666; 
 
    background-color: #fff; 
 
} 
 

 
.blog .widget-panel .tag-box .tag-block:hover, 
 
.blog .widget-panel .tag-box .tag-block.selected { 
 
    background-color: #38B7EA; 
 
    color: #fff; 
 
} 
 

 
.blog .widget-panel .tag-box.block .tag-block[data-title]:hover:after { 
 
    content: attr(data-title); 
 
    position: absolute; 
 
    z-index: 20; 
 
    white-space: nowrap; 
 
    background: rgba(85,85,85, 0.9); 
 
    padding: 4px 8px; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
    margin-top: 2.8em; 
 
} 
 

 
.blog .widget-panel .tag-box .tag-block .count{ 
 
    float: right; 
 
}

<div class="blog"> 
 
    <div class="panel panel-default widget-panel"> 
 
     <div class="tag-box block"> 
 
      
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 
      <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a>   <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
      All 
 
      <span class="count">14</span> 
 
      </a> 
 
       <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
        test 
 
        <span class="count">7</span> 
 
       </a>   <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
       <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
        test 
 
        <span class="count">7</span> 
 
       </a>   <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
       <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
        test 
 
        <span class="count">7</span> 
 
       </a>   <a class="tag-block" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       All 
 
       <span class="count">14</span> 
 
      </a> 
 
      <a class="tag-block tag-test" href="#" data-title="A few languages with well-developed systems of articles may distinguish additional subtypes. Within each type, languages may have various forms of each article"> 
 
       test 
 
       <span class="count">7</span> 
 
      </a> 
 

 
     </div> 
 
    </div> 
 
</div>

источник

2016-09-13 azlar

Не используйте тот же идентификатор снова и снова на одной веб-странице, например '' 'Все-tags'''. Если вы устанавливаете '' 'position: absolute''' для любого div или тега и хотите показать его относительно родительского тега, вы должны установить' '' position: relative''' родительскому тегу. – aavrug

Спасибо. Когда я добавляю 'position: relative' к родительскому (' .tag-block'), он будет показывать горизонтальную полосу прокрутки, не показывая, как я хочу, тоже. – azlar

При добавлении 'position: relative;' to '.tag-block' будет скрывать заголовки' overflow'. как здесь: [https://jsfiddle.net/dp70zv5o/2/](https://jsfiddle.net/dp70zv5o/2/.) – azlar

Рабочая скрипку: https://jsfiddle.net/TheBigDMo1/k2ahruyb/5/

Использование CSS подсказки: http://www.w3schools.com/css/css_tooltip.asp
- Если вы используете эту опцию, вам необходимо полностью избавиться от атрибута data-title

Вот ваш CSS:

.blog .widget-panel { 
    height: 200px; 
    width: 200px; 
    margin: 20px; 
    position: fixed; 
} 

.blog .widget-panel .tag-box { 
    overflow-x: hidden; 
    overflow-y: auto; 
    height: 100%; 
} 

.blog .widget-panel .tag-box.remove-over-flow { 
    overflow-x: visible; 
    overflow-y: visible; 
} 

.blog .widget-panel .tag-box .tag-block { 
    display: block; 
    line-height: 28px; 
    border-bottom: 1px dotted rgba(0,0,0,0.1); 
    padding: 7px; 
    color: #777; 
    background-color: #fff; 

    position: relative; 
} 

.blog .widget-panel .tag-box .tag-block .tooltip-text { 
    visibility: hidden; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin-left: 10px; 
    padding-left: 5px; 
    border-radius: 6px; 
    z-index: 1; 

    white-space: nowrap; 

    /* Position the tooltip text - see examples below! */ 
    position: fixed; 
} 

.blog .widget-panel .tag-box .tag-block .tooltip-text::after { 
    content: " "; 
    top: 50%; 
    right: 100%; 
    margin-top: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 

    /* Position the tooltip text - see examples below! */ 
    position: absolute; 
} 


.blog .widget-panel .tag-box .tag-block:hover .tooltip-text, 
.blog .widget-panel .tag-box .tag-block.selected .tooltip-text { 
    visibility: visible; 
    /*background-color: #38B7EA;*/ 
    /*color: #fff;*/ 
}

Вот ваш Jquery:

$(".tag-block").on('click', function() { 
    $(".tag-box").toggleClass("remove-over-flow"); 
}); 

$('.tooltip-text').click(function() { 
    $(this).hide(); 
});

отредактирован: добавлена рабочая скрипку, добавил CSS

источник

2016-09-13 07:43:37 ihodonald

Спасибо, это подсказка по умолчанию браузера. Я не могу его стилизовать. Использование 'data-title' одинаково для ваших' CSS-подсказок' :) Я не могу добавить ссылку «position: relative» к ссылке. – azlar

Ваша всплывающая подсказка должна быть «span», которая становится видимой (используя относительное позиционирование) с tag-блоком: hover вместо атрибута HTML вашего тега привязки. Ваша длина всплывающей подсказки должна выглядеть следующим образом: ' Текст подсказки' – ihodonald

Вы также должны иметь 'tag-блок: hover.tooltiptext { видимость: видимая; } 'в вашем файле CSS. Таким образом, вы можете создать свою подсказку с помощью .tagblock .tooltiptext {visibility: hidden; } 'в CSS. – ihodonald

Я использую Chrome, и он отлично работает для меня. Похоже на ваш пример Firefox.

[Я ставлю это как ответ, потому что я не знаю, как комментировать с изображениями]

источник

2016-09-13 06:17:57

привет, прокрутите полосу прокрутки и просмотрите последние несколько ссылок. – azlar

css абсолютный элемент спрятан переполнением: auto

ответ

Смежные вопросы