小编Ben*_*jen的帖子

为什么在转换父级时子级位置会受到影响？

我希望蓝色框留在黄色框的右下角位置。但是当我翻译红色框时，蓝色框会移动到他的（红色）父级。

在现实生活中，红色框代表我在 Angular 中的 ui-view。视图正在滑入和滑出。我无法更改 HTML 层次结构。

查看我的代码笔 https://codepen.io/benbesuijen/pen/GPOQjM

HTML

<div class="box-yellow">
    <div class="box-red">
        <div class="box-blue"></div>
    </div>
</div>

CSS

.box-yellow {
  background-color: yellow;
  position: relative;
  height: 200px;
  width: 200px;
}

.box-red {
  background-color: red;
  height: 100px;
  width: 100px;  
}

.box-blue {
  background-color: blue;
  bottom: 0;
  height: 50px;
  position: absolute;
  right: 0;
  width: 50px;
}

.box-move {
  transform: translateX(100%);
}

我有三张Sass地图,我想合并到一张地图中.使用map-merge函数,我只能将两个映射合并在一起.如何合并两张以上的地图？

我的情况的一个缩短的例子:

    $color-name: (
        blue: (
            default: blue,
            dark: navy,
            light: sky
        )
    );

    $color-event: (
        danger: (
            default: set($color-name, red),
            dark: set($color-name, red, dark),
            light: set($color-name, red, light),
        )
    );

    $color-category: (
        heading: (
            default: set($color-name, grey),
            dark: set($color-name, grey, dark),
            light: set($color-name, grey, light)
        )
    );

    $color: map-merge($color-name, $color-event, $color-category);