0

In the snippet below I expect .fixed to be fixed relatively to the body. It works fine - element is fixed, until transform is applied to .wrapper on hover - .fixed element now movew with parent container. Why is that happening and how do I avoid this?

.wrapper {
  background: salmon;
  height: 300px;
  margin: 30vh;
  transition: .4s;
}

.wrapper:hover {
transform: translateX(30px) translateY(10px);
}

.fixed {
  font-family: Arial;
  color: white;
  text-transform: uppercase;
  font-size: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
<div class="wrapper">
  <div class="fixed">
    fixed
  </div>
</div>
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
  • You have to re-arrange your structure – Viira Nov 28 '18 at 09:22
  • use top/left or change margin instead of transform – Temani Afif Nov 28 '18 at 09:27
  • @TemaniAfif I'm unable to use that - transform is applied by `swiper` slider (which uses transforms on parent container to move between slides) and I planned to have fixed text and to store it inside sliders so I will be able to determine which is active – godblessstrawberry Nov 28 '18 at 09:28
  • like explained in the duplicate, you have no luck using such configuration because you only have 2 possibilities (1) don't use transform (2) move the fixed element outside. – Temani Afif Nov 28 '18 at 09:30
  • @TemaniAfif okay I'll move out of the slides container and will set active text index in js on `slidechange` event, thanks for the link that explains the behavior – godblessstrawberry Nov 28 '18 at 09:40

0 Answers0