I'm trying to apply CSS transform property to two elements(Parent and child) But the problem is when i adding transform to parent then it affects child positioning.

An Example:

$('.dropdownToggler').click(function() {
  $('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
  $('.topbar').toggleClass('transform');
});
* {
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px;
  color: #fff;
  /* remove comment below */
  /*transform: translateY(0);*/
}

.topbar.transform {
  transform: translateY(0);
}

.dropdown {
  background: #ddd;
  height: 100%;
  position: fixed;
  top: 45px;
  right: 0;
  left: 0;
  color: #333;
  /* main styles */
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.dropdown.-isOpen {
  transform: translateY(0%);
}

.test {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="topbar">
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
    <div class="dropdown">Notifications</div>
  </div>

</body>

</html>
Expand snippet

When you add transform: translateY(0); to the topbar (Parent) then notifications panel(Child) positioning based on parent. I'm trying to prevent this behavior.

For smoother animations, I've used transform, of course, we can use CSS top. Any suggestion? Thank you for devoting your time.

您可以设置视口单位的高度.dropdown（100vh - 的高度topbar）

例子：

$('.dropdownToggler').click(function() {
  $('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
  $('.topbar').toggleClass('transform');
});
* {
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px;
  color: #fff;
  /* remove comment below */
  /*transform: translateY(0);*/
}

.topbar.transform {
  transform: translateY(0);
}

.dropdown {
  background: #ddd;
  height: calc(100vh - 45px);
  position: fixed;
  top: 45px;
  right: 0;
  left: 0;
  color: #333;
  /* main styles */
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.dropdown.-isOpen {
  transform: translateY(0%);
}

.test {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="topbar">
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
    <div class="dropdown">Notifications</div>
  </div>

</body>

</html>
展开片段

非常感谢您提供的解决方案，您能描述一下为什么会发生这种情况吗？
好像是几个类似的问题。这可能会有所帮助：stackoverflow.com/a/15256339/5561605