Создание элементов сиблинга фиксировано независимо от верхней позиции

Question

Вот код, с которым я столкнулся.

HTML

<a href="">abc</a> 
<p>text</p> 

CSS

a { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    background: red; 
} 
a:hover { 
    height: 90px; 
} 

У меня есть 2 элемента, и я хочу сделать вторые элементы фиксированной позиции, независимо от высоты первого. В приведенной выше скрипте высота меняется на «Hover», а затем я вижу, как второй элемент дергается.

Использование позиции Fixed и Absolute не будет работать в моем случае.

любые мысли?

Answer 1

Вы можете использовать padding-top для абзаца. Значение - это разница высот в нормальном и зависающем состоянии. Я использовал + селектор для выбора следующего элемента.

a { 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
a:hover { 
 
    height: 90px; 
 
} 
 
a:hover + p { 
 
    padding-top: 10px; /* Value(Difference between heights) */ 
 
}

<a href="">abc</a> 
 
<p>text</p>