如何避免CSS transform属性影响子元素定位？

嘿，这个问题我之前也踩过坑！其实这是CSS的标准行为：当你给某个元素添加transform属性时，这个元素会创建一个新的包含块——原本设置position: fixed的子元素，会从相对于视口定位，变成相对于这个带transform的父元素定位，这就是你的dropdown位置异常的原因。

下面给你两个能保留transform流畅动画、又能解决定位问题的方案：

方案1：把dropdown移出topbar容器（最推荐） #

直接把dropdown从.topbar里拿出来，放到<body>下面。这样它的fixed定位就完全基于视口，再也不会受topbar的transform影响，两边的动画效果也都能完整保留。

修改后的完整代码： #

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="topbar">
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
  </div>
  <!-- 把dropdown移到topbar外面，直接挂在body下 -->
  <div class="dropdown">Notifications</div>
  <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</body>
</html>

CSS

* { box-sizing: border-box; }
.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px;
  color: #fff;
}
.topbar.transform {
  transform: translateY(0);
  /* 这里可以换成你实际需要的动画，比如translateY(-100%)做隐藏效果 */
}
.dropdown {
  background: #ddd;
  height: 100%;
  position: fixed;
  top: 45px;
  right: 0;
  left: 0;
  color: #333;
  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;
}

JS

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

方案2：给topbar加内部容器承载transform（不改动DOM结构的话选这个） #

如果不想调整DOM结构，可以在topbar里套一个内部容器，把原本要给topbar的transform属性加到这个容器上。topbar本身保持position: fixed且不设置transform，这样就不会创建新的包含块，dropdown的fixed定位依然基于视口。

修改后的关键代码： #

HTML

<div class="topbar">
  <!-- 新增内部容器，把topbar里的内容放进去 -->
  <div class="topbar-inner">
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
  </div>
  <div class="dropdown">Notifications</div>
</div>

CSS

.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 0; /* 把padding移到内部容器 */
  color: #fff;
}
.topbar-inner {
  padding: 12px;
  transition: transform 300ms ease-in-out;
}
/* 把transform加到内部容器上 */
.topbar.transform .topbar-inner {
  transform: translateY(0); /* 换成你需要的动画值 */
}

为什么这两个方案可行？ #

• 方案1让dropdown脱离了带有transform的父元素，它的fixed定位回归到默认的基于视口的行为，两个元素的transform动画各自独立，互不干扰。
• 方案2把transform的作用对象转移到了内部容器，topbar本身不触发新包含块的创建，所以dropdown的fixed定位不受影响，视觉上的动画效果也能正常实现。

这两种方案都能完美满足你的需求：保留transform的流畅动画，同时避免子元素定位异常的问题。

内容的提问来源于stack exchange，提问作者Reza Ramezanpour