У меня проблема с position: sticky, используемой в контейнере с абсолютным позиционированием и гибкой высотой.Для вертикального выравнивания элемента я использую
top: 50%;
transform: translateY(-50%);
Один дочерний элемент липкого элемента - кнопка, и его хитбокс, по-видимому, находится там, где был элемент до применения преобразования (то есть под фактическим элементом).
Проблема появляется только в Microsoft Edge (EdgeHTML версия 16).Это (известная) ошибка?Это ожидаемое поведение?Я делаю что-то не так?
Ниже приведен фрагмент, показывающий проблему с использованием эффектов наведения CSS на границах элементов (вы должны увидеть, как меняется цвет границы, если вы наводите немного под полем)
.body {
max-height: 600px;
overflow: auto;
}
.container {
width: 500px;
border: 1px dotted blue;
position: relative;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.item {
border: 2px solid red;
position: sticky;
top: 50%;
transform: translateY(-50%);
background: white;
}
.item:hover {
border: 2px solid green;
}
.button {
border: 1px solid pink;
}
.button:hover {
border: 1px solid turquoise;
}
<div class='body'>
<div class='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna vel risus interdum sollicitudin et ut magna. Pellentesque enim magna, consequat non pellentesque ut, posuere maximus diam. Suspendisse potenti. Curabitur congue et orci nec fermentum.
Donec in justo ut sem fringilla pellentesque ut a erat. Fusce pharetra metus vel mauris vestibulum fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec aliquam odio, id elementum purus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pharetra convallis aliquet. Aenean vitae venenatis tortor, consequat rhoncus velit. Morbi sit amet blandit purus. Curabitur in sagittis orci. Nam
dictum vitae turpis eget lobortis. In venenatis a purus sed lacinia. Nulla eget sem id lectus suscipit commodo. Praesent laoreet neque ut leo porttitor scelerisque. Cras a massa vel justo pellentesque gravida. Suspendisse diam est, vehicula eu mollis
quis, pellentesque ut quam. Vivamus aliquam elementum diam, sit amet hendrerit arcu dapibus ut. Maecenas sodales mollis augue. Duis fringilla lobortis condimentum. Aliquam eu nisl a enim efficitur egestas. Mauris vel vestibulum mauris. Proin ut
quam et augue consectetur posuere. Aliquam finibus, elit ac accumsan mollis, sem est facilisis ex, et finibus enim enim malesuada sem. Sed sit amet imperdiet dolor. Donec sagittis rutrum molestie. Donec orci mauris, congue eget sapien vitae, efficitur
posuere est. Suspendisse auctor nibh turpis, at laoreet enim pretium in. Vivamus fermentum tristique mauris, eu rhoncus nulla maximus sit amet. Mauris iaculis odio ac laoreet condimentum. Praesent at neque eget mauris efficitur vestibulum. Integer
massa justo, sodales non ultricies non, eleifend quis libero. Ut non pulvinar ipsum, pulvinar placerat mauris. Suspendisse cursus faucibus urna, et interdum libero pharetra id. Cras et vulputate lacus. Aenean mollis purus in tellus porta, et pretium
felis suscipit. Integer tempus, velit condimentum tincidunt commodo, felis nisi semper ex, vel condimentum nulla tellus eu sem. Etiam tincidunt nunc auctor mi rutrum, at tempor libero eleifend. Aliquam mi neque, cursus nec feugiat non, aliquet sed
nisi. Pellentesque ultrices ipsum eget commodo sollicitudin. Mauris eu posuere quam. Donec id metus vulputate, maximus tellus at, posuere eros. Etiam elementum sapien quis ligula lobortis maximus. Curabitur eros sem, ultricies vel metus a, imperdiet
ultricies purus. Aliquam eget condimentum magna. Donec augue nibh, tempus id lorem in, pharetra pellentesque ligula. Pellentesque aliquam lorem non ex sollicitudin tempus quis at tortor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Phasellus dapibus efficitur mattis. Nam finibus libero nec vestibulum malesuada. Maecenas at erat eros. Donec viverra, urna at lacinia ullamcorper, nisl lacus tincidunt risus, sed varius sapien felis non justo.
Proin dui erat, viverra vitae augue eget, ornare consequat ex. Phasellus non aliquam lorem. Nunc ut consequat justo, a rhoncus ligula. Nulla nec malesuada turpis, sed maximus turpis. Suspendisse iaculis eget orci ut venenatis. In in scelerisque
risus, quis porttitor mi. Phasellus ac erat sit amet ex convallis condimentum vel vel nibh. Vivamus volutpat nisl ac sollicitudin ullamcorper. Nunc facilisis, lacus consectetur bibendum cursus, orci massa congue ante, id consectetur justo est vitae
ex. Donec tristique diam sit amet posuere facilisis. Nulla convallis rhoncus augue. Praesent rhoncus quis lectus sed laoreet. Phasellus volutpat ex vel diam egestas, at sagittis diam tempus. Mauris rutrum ex sit amet lacus maximus, et sollicitudin
tortor fermentum. Suspendisse potenti. Nam posuere ante et erat tincidunt, a ultricies odio elementum. In eget mi ut lorem tincidunt molestie. Maecenas accumsan massa a est imperdiet, in placerat velit lacinia. In tortor mi, commodo et justo a,
imperdiet viverra leo. Mauris non neque vitae risus rhoncus pellentesque. Aliquam vel urna sit amet augue congue interdum. Mauris ut auctor est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eget lectus
nec felis dapibus scelerisque et ac orci. Suspendisse eget sem consectetur, fringilla sapien ac, placerat ante. Praesent eu neque ac dui sollicitudin rhoncus. Suspendisse potenti. Nunc varius massa quis dapibus pulvinar. Curabitur molestie faucibus
semper. Cras posuere ut mauris ac pellentesque. Duis quis augue eget nunc condimentum aliquet. Pellentesque suscipit turpis non eros congue, a luctus leo scelerisque. Praesent accumsan odio quis dui iaculis dapibus. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Nam suscipit tellus eu nibh vehicula, quis venenatis leo fermentum. Praesent ornare tellus a metus accumsan dignissim. Donec luctus orci quis fermentum malesuada. Suspendisse malesuada leo
nisl, non placerat augue venenatis eu. Ut dapibus sapien eget orci tempor, et consectetur tellus molestie. Vestibulum non arcu vitae leo ultrices dignissim. Aenean sodales est sit amet porta rhoncus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Pellentesque fermentum tellus non purus consectetur, eu rutrum tortor mollis. Cras sollicitudin, erat vel blandit tempor, lectus urna fermentum sem, nec porta turpis sem nec turpis. Cras arcu enim,
viverra id eleifend quis, convallis id tortor. Vestibulum porta velit purus, in sollicitudin dui sodales vel. Quisque quis blandit ex. In in finibus massa. Donec nec mattis dui. Nulla ac dui lobortis, facilisis leo in, efficitur ipsum. Morbi eleifend
sollicitudin lorem et porta. Nulla lobortis nec ipsum posuere accumsan. Curabitur a posuere libero.
</div>
<div class='wrapper'>
<div class='item'>
Hello
<div class='button'>
Click me
</div>
</div>
</div>
</div>
</div>