jQuery: можно ли использовать z-index для решения этой проблемы? - PullRequest
Новая
       24

jQuery: можно ли использовать z-index для решения этой проблемы?

4 голосов
/ 26 декабря 2011

Прежде чем перейти к проблеме, я подумал, что было бы лучше описать, что я пытаюсь сделать ... если вы перейдете к этой скрипке, вы сможете увидеть это (хотя и с проблемами) в действии:

http://jsfiddle.net/jhacks/xCcdn/99/ (для работы должен быть выбран jQuery)

Проблема, которую я пытаюсь решить с помощью этого поста, довольно явно испорчена в скрипке.Из-за упорядочения моего HTML-кода всплывающая подсказка (topTip) перемещает значок уведомления (topIconNew) вниз, когда он присутствует.Очевидно, значок уведомления должен оставаться стационарным.Я не хочу изменять порядок HTML, так как значок уведомления не всегда будет присутствовать.Следовательно, все они могут быть расположены с использованием одного и того же класса.Я думаю, что решение должно быть z-index?Тем не менее, мои попытки использовать CSS для его решения, похоже, не работают ... Я предполагаю, что я должен кое-что сделать в jQuery, возможно?

Если кто-то может мне здесь помочь, это будет очень признательно,Дайте мне знать, если мне нужно быть более ясным с тем, что я собираюсь сделать здесь, и я постараюсь объяснить лучше.Спасибо!

Ответы [ 4 ]

2 голосов
/ 26 декабря 2011

Измените два свойства CSS .topTip на эти: 

position: absolute;
top: 40px;
right: 0px;

И добавить это свойство CSS в .topIcon: 

position: relative;

Обновлен jsFiddle

1 голос
/ 26 декабря 2011

изменение 

<a href="icon.html"><img src="icons/icon.png" /></a>

<div class="topTip">
    <div class="topTipText">hello</div>
</div>
<div class="topDrop">What's up</div>
<div class="topIconNew"></div>

до 

<a href="icon.html"><img src="icons/icon.png" /></a>
<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">hello</div>
</div>
<div class="topDrop">What's up</div>

также добавлен .topIconOld в качестве проставки, где вы не увидите красный значок для сохранения расстояния. Надеюсь, вы увидите на этой скрипке , впервые я использовал ее для обмена и т. Д .: -)

1 голос
/ 26 декабря 2011

Надеюсь, я правильно понял вопрос.Я бы рекомендовал использовать абсолютное позиционирование, чтобы значки отображались там, где отображается подсказка.Вам также следует установить для позиции .topIcon значение «относительное», чтобы абсолютная позиция подсказки относилась к нему.Изменения будут примерно такими.(Не уверен насчет фактических чисел для позиции. 

.topIcon {
    position: relative;
}

.topIconNew {
    bottom:-20px;
    right:14px;
    position: absolute;
}
1 голос
/ 26 декабря 2011

Возможно, попробуйте: http://jsfiddle.net/sdPVG/

Я добавил отрицательные поля, чтобы компенсировать высоту блока и ширину границы. Это выглядит немного странно, но на самом деле очень хорошо поддерживается во многих браузерах.

Hoep, который помогает!

...