Вопрос по css: работа с overflow: hidden;

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#1 17 марта 2015 в 21:32
Здравствуйте.
Подскажите возможно ли выйти за границу родительского блока, если там стоить css правила overflow: hidden;
Допустим есть код:
  1.  
  2. <div style="overflow: hidden;>
  3. <a href="#" data-tip="подсказка">ссылка</a>
  4. </div>
  5.  
При наведении мышь на ссылку, появиться всплывающая подсказка, но из за overflow: hidden; часть подсказки не отображается, как решить? может кто то встречал подобную проблему?
#2 17 марта 2015 в 21:35
z-index:1000;?
#3 17 марта 2015 в 21:46

z-index:1000;?

Lora
Не помогло, у родительского блока поставил z-index: 1 а ссылке внутри z-index: 1000
или я что то не так делаю?
#4 17 марта 2015 в 21:51
Опять вводят в заблуждение если у родителя стоит hidden то какой бы вы z-index не ставили то дочерний блок будет скрыт. тут скорее всего нужно по другому верстать.
#5 17 марта 2015 в 21:54
может для самой подсказки попробовать задать другое значение overflow
#6 17 марта 2015 в 21:55

тут скорее всего нужно по другому верстать.

maxisoft
наверно sadа то если hidden убрать, весь дизайн разваливается
#7 17 марта 2015 в 21:59

может для самой подсказки попробовать задать другое значение overflow

Нил
Задал значение overflow: visible; но не помогло
#8 17 марта 2015 в 22:03

Подскажите возможно ли выйти за границу родительского блока

Evanescence
Если я правильно задачу понял:

убрать overflow:hidden;
для div — position:relative;
для a — position:absolute;

И уже позиционировать как вам нужно.
#9 17 марта 2015 в 22:08

наверно а то если hidden убрать, весь дизайн разваливается

Evanescence
дайте ссылку
#10 17 марта 2015 в 22:14

убрать overflow:hidden;
для div — position:relative;
для a — position:absolute;

Rossoman
Убрать не могу, overflow:hidden и position:relative; добавляется к div с помощью js автоматический (использую Flexslider)
Наверно придется другому верстать.

дайте ссылку

Rossoman
Сайт на денвере
#11 17 марта 2015 в 23:08
Незнаю то ли вам надо, но приведу пример со слайдером. Вот html
  1. <div id="slider" >
  2. <div class="realm-slide">
  3. <?php $this->printModules('slider');?>
  4. </div>
  5. </div>
В модуле сам слайдер. Вот картинка

У #slider{
.....
position:relative;
overflow:hidden;
}
У .realm-slide{
.....
position:absolute;
}
Сам слайдер в абсолюте
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index:0;
, и div с текстом тоже.
z-index: 1000;
position: absolute;
Попоробовал уменьшил слайдер и диву с текстом задал left:-100px; И вот что выходит

Такова задача?
#12 18 марта 2015 в 00:46

  1. <div style="position:relative;width:300px;height:160px;background:#eee;">
  2. <p>Родитель с position:relative;</p>
  3. <div style="overflow:hidden;position:static!important;width:350px;height:80px;margin:10px;background:#ddd;padding:5px">
  4. <p>Родитель с overflow:hidden и position:static!important (<i>!important может и не понадобится</i>)</p>
  5. <div style="position:absolute;left:315px;top:140px;width:110px;height:25px;background:#333;color:#fff;padding:10px">
  6. А я таки видим!
  7. </div>
  8. </div>
  9. </div>
#13 18 марта 2015 в 09:16
Спасибо всем, добавил к div position:static а ссылке position:absolute;
Проблема решена)
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.