Показать div относительно его родительской верхней позиции

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

HTML

<div class="guide-container"> 
    THIS IS THE PARENT DIV 
<aside class="guide-extras"> 
    THIS IS THE SIDEBAR 
</aside> 
</div>

Jquery

$(".guide-container").hover(function() { 
      var container = $(this).find("aside").toggle(); 
      var height = $(this).find("aside").position().top 
      $(this).find("aside").css("top", height); 
    });

источник

2016-07-14 Gibson

Это нормально, если DIV являются плавал слева и справа? –

Или они 'display: inline-block;'? –

Разделы отображаются на дисплее: нет, потому что они будут отображаться только при их зависании родителя – Gibson

Вы можете сделать это, используя только CSS:

.guide-extras { 
 
    float: right; 
 
    display: none; 
 
} 
 

 
.guide-container:hover > .guide-extras { 
 
    display: block; 
 
    position: relative; 
 
    top: 100px; 
 
}

<div class="guide-container"> 
 
    THIS IS THE PARENT DIV 
 
<aside class="guide-extras"> 
 
    THIS IS THE SIDEBAR 
 
</aside> 
 
</div> 
 
<br/><br/><br/><br/> 
 
<div class="guide-container"> 
 
    THIS IS THE PARENT DIV 
 
<aside class="guide-extras"> 
 
    THIS IS THE SIDEBAR 
 
</aside> 
 
</div>

JSFiddle

источник

2016-07-14 14:41:11

Отлично, что сработало, как шарм, не думал об этом. Благодаря! – Gibson

Нет проблем. Пожалуйста, выберите ответ как правильный, как только сможете, если он сработает для вас. Рад, что смог помочь! –

Попробуйте просто добавить margin-top: 100px; к классу .guide-extras CSS.

источник

2016-07-14 14:38:36 matt

Это покажет все боковые панели в том же положении, мне нужно, чтобы каждая боковая панель показывала относительно своих родителей верхнюю позицию. – Gibson

Почему JavaScript? Вы можете сделать это с простой CSS:

.guide-container { 
 
    position: relative; 
 
    border: 1px solid #f00; 
 
    margin: 10px 0; 
 
    height: 70px; 
 
    width: 50%; 
 
} 
 

 
.guide-extras { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: -210px; 
 
    width: 200px; 
 
    border: 1px dashed #00f; 
 
    display: none; 
 
} 
 

 
.guide-container:hover .guide-extras { 
 
    display: block; 
 
}

<div class="guide-container"> 
 
    THIS IS THE PARENT DIV 
 
    <aside class="guide-extras"> 
 
    THIS IS THE SIDEBAR 
 
    </aside> 
 
</div> 
 
<div class="guide-container"> 
 
    THIS IS THE PARENT DIV 
 
    <aside class="guide-extras"> 
 
    THIS IS THE SIDEBAR 
 
    </aside> 
 
</div>

источник

2016-07-14 14:44:09 VisioN

Показать div относительно его родительской верхней позиции

ответ

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