Как мне сделать div придерживаться другого элемента - PullRequest
Новая
       0

Как мне сделать div придерживаться другого элемента

4 голосов
/ 28 июля 2011

Я делаю систему голосования.Когда пользователь нажимает на ссылку с классом «голосование», появляется окно для голосования, которое появляется только после нажатия на ссылку.На данный момент это выглядит так:

enter image description here

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

Мой контейнер имеет такой стиль: 

#vote_container {
    position: fixed;
    height: 82px;
    min-height: 83px;
    background-color: #e7edf3;
    border: 3px solid #d3d6d8;
    border-radius: 10px;
    left: 40%;
    margin-top: 6px;    
    padding: 10px;    
    text-align: left;
    top: 60%;
    z-index: 199;    
}

И это кодиспользуйте для позиционирования контейнера: 

var pos = $(this).offset();
var width = $(this).width();        
$("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" });

Я даже создал упрощенный пример в jsFiddle.

Ответы [ 4 ]

6 голосов
/ 28 июля 2011

Помогает ли изменение позиции #vote_container полностью решить вашу проблему?http://jsfiddle.net/xkNqG/9/

РЕДАКТИРОВАТЬ: Кроме того, в CSS я добавил display:none и в функцию добавил $ ('# voice_container'). Show ()

1 голос
/ 28 июля 2011

#vote_container не должен быть 'position: fixed', поскольку ngen говорит, что вместо этого должно быть 'position: absolute' вот моя скрипка Я упростил вашу css (для временных целей) просто для того, чтобы помочь добраться докорень проблемы и добавил больше текста, чтобы скрипка действительно продемонстрировала проблему прокрутки.

0 голосов
/ 28 июля 2011

Почему бы вам не использовать плагин jQuery tooltip, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip, и улучшить его, стилизовав его так, как вы хотите. Он уже обрабатывает позиционирование и может содержать текст или разметку.

0 голосов
/ 28 июля 2011

Если вам нужно чистое решение CSS, попробуйте это.

CSS 

.tipLink{
  color:#33f;
  cursor:pointer;
  position:relative;
}
.tip{
  position:absolute;
  display:none;
  top:80%;
  left:110%;
  background-color:#dddddd;
  border:1px solid black;
  width:100px;
  color:black;
  z-index:20;
  padding:3px;
  -webkit-border-radius:5px 5px 5px 5px;
  -moz-border-radius:5px 5px 5px 5px;
  border-radius:5px 5px 5px 5px;
  text-align:center;
}
.tipLink:hover .tip{
  display:block;
}

HTML 

<span class="tipLink">
  Mouse Over Me
  <span class="tip">Hello World</span>
</span>

Вам нужно будет присвоить внутреннему тегу span нужный вам дизайн, но это должно сработать.

...