Why does the fixed element lose its position when the Transform property is used?

Asked

Viewed 24 times

1

I have an element with the position defined as "Fixed", when I apply the property "Transform" to create an animation the fixed element loses its position (when clicking the button to animate it becomes clearer).

How to fix this?

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector('button').onclick = () => { 
     const container = document.querySelector('.container');
     container.style.transform = 'translateX(-100px)'
     setTimeout(()=>{
      container.style.transform = "";
     }, 1100)
  }; 
});
main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container{
    width: 320px;
    height: 500px;
    background-color: #717;
    transition: all 1s;
}

.fixed{
    position: fixed;
    width: 320px;
    height: 70px;
    background: rgb(251, 255, 0);
    top: 0px;
}

button{
  margin: 15px;
}
<main>
  <div class="container">
    <div class="fixed"></div>
  </div>
  <button>Animate</button>
</main>

css

  • I can’t understand the mentality of these people who are negative, what’s the problem? if I didn’t know how to ask help me improve the question, don’t worry and run away, if you don’t understand the subject or will not contribute in any way to the problem, negative will not help at all.

  • Dude, I don’t get what you mean by "lose your position" what’s going on that you shouldn’t? And on the negative vote, don’t worry, there’s a user here who from Downvote on every new question, especially if I had the CSS tag. The guy thinks that with a Downvote he helps on something rss, rather vote negative than lose 1 min trying to help in fact

1 answer

2


Dude although the answer solves the problem, I can’t tell you exactly why when you put the transform the element fixed misses the reference in viewport :/

inserir a descrição da imagem aqui

To solve the problem first put a margem: 0 in the html e body, this will avoid a "hop" that the animation is giving at the beginning. Then change position: fixed; which positions the element relating to viewport, for position: sticky, which positions the element relative to parent container.

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector('button').onclick = () => { 
     const container = document.querySelector('.container');
     container.style.transform = 'translateX(-100px)'
     setTimeout(()=>{
      container.style.transform = "";
     }, 1100)
  }; 
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container{
    width: 320px;
    height: 500px;
    background-color: #717;
    transition: all 1s;
}

.fixed{
    position: sticky;
    width: 320px;
    height: 70px;
    background: rgb(251, 255, 0);
    top: 0px;
}

button{
  margin: 15px;
}
<main>
  <div class="container">
    <div class="fixed"></div>
  </div>
  <button>Animate</button>
</main>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.