使用 CSS 堆叠自定义窗口（div）答案

【问题标题】：Stack customized windows(divs) using CSS使用 CSS 堆叠自定义窗口（div）
【发布时间】：2017-05-16 07:51:36
【问题描述】：

我正在做一个单页应用程序，假设您能够在页面上打开多个自定义窗口（不是浏览器选项卡/窗口，而是使用 DOM 创建的窗口）。我希望窗户以一定的 XY 偏移量相互堆叠。我尝试在第一个 div 之后的 div 中添加 transform: translate(5%, 5%)，但它根本不起作用。

我希望它们像这样堆叠：

但现在，它们只是堆叠在一起。

HTML：

<main>
    <div class=window><div class=app></div></div>
    <div class=window><div class=app></div></div>
    <div class=window><div class=app></div></div>
</main>

CSS：

main {
    transition: margin-left .5s;
    padding: 20px;
    position: fixed;
    margin-left: 100px;
    width: 100%;
    height: 100%;
    top: 0;
}

.window {
    z-index: 1;
    left: 0;
    top: 0;
    width: 250px;
    height: 400px;
}

有什么想法吗？

【问题讨论】：

您应该创建一个Minimal, Complete and Verifiable example 以便我们能够为您提供帮助。
您可以跟踪打开的模式数量吗？如果是，那么您可以继续增加计数器，然后您可以应用 css，例如 translate((counter+5)%, (counter+5)%)
请提供一些关于父元素和子 div 的 html/css 的基本信息。重要的是要知道例如位置绝对...属性您用于他们了解您的问题
如果您找到了自己问题的答案，请不要将其编辑到问题中。只需自己给出答案即可。
好的，我会的！我没有为 CSS 寻找规则而摸索，而是用 Javascript 做了一个解决方案。增加每个新打开的 div 顶部和左侧 10 像素。

标签： javascript html css

【解决方案1】：

尝试将position: absolute 添加到所有div 并使用left: <num>px 和top: <num>px 定位它们。确保包含元素是position: relative，否则 div 将相对于“视口”进行绝对定位。

有关绝对定位的更多信息，请参阅this article。

【讨论】：

【解决方案2】：

transform: translate(...) 适用于元素本身，而不适用于父元素，所以也许这对你不起作用。我会使用类似 Jason Cemra 提到的方法。看看这个另一个答案，也许它对你有帮助：How to use transform:translateX to move a child element horizontally 100% across the parent

【讨论】：

【解决方案3】：

好的，这有一些注意事项：http://codepen.io/anon/pen/dNbqgE

html:

<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>

css:

.card {
  width: 100px;
  height: 200px;
  outline: 1px solid #cc0000;
  position: absolute;
  background: #ddd;
}

.card:nth-of-type(n + 1) {
  transform: translate(5%, 5%);
}

.card:nth-of-type(n + 2) {
  transform: translate(10%, 10%);
}

.card:nth-of-type(n + 3) {
  transform: translate(15%, 15%);
}

.card:nth-of-type(n + 4) {
  transform: translate(20%, 20%);
}

.card:nth-of-type(n + 5) {
  transform: translate(25%, 25%);
}

需要注意的是，您必须为您需要的每个级别的卡片定义一个新的 nth-of-type 规则。如果你使用 less、sass 或其他 css 构建工具，你可以很容易地设置一个宏来生成任意数量的这些。

【讨论】：

嗯，就是这样！虽然，我必须找到一种方法来定义第 n 个类型的规则。整个应用程序是用 CSS 编写的，因此将所有这些更改为 sass 或更少可能为时已晚（除非您可以将 sass 导入 css ？？？）。知道如何为每个窗口制定规则吗？
我喜欢你的风格。我也更喜欢用标准 CSS 编写所有内容。构建工具很有用，但我仍然更喜欢手动编写所有内容。只是一个提示，但“窗口”一词令人困惑。通常“窗口”是指浏览器，而不是 DOM 组件。 Sass/less 等都只是构建在 css 之上的构建工具，因此您可以直接转储整个 css 项目而无需更改。设置好了，没必要。如果您知道您将使用的“windows”的平均值，您可以复制/粘贴并创建附加内容并修改 n + (n) 和翻译中的百分比。
.card:nth-of-type(n + 1) 在这段代码中应该是.card:nth-of-type(1)。

【解决方案4】：

对于窗口 div 的位置，我们必须设置相对于已知参考的 x-y 位置。如果所有 win div 都在同一个父级中，我们为它们使用不同的偏移量：例如：transform: translate(5%, 5%); 用于第一个 div，transform: translate(10%, 10%); 用于第二个 div，依此类推。

另一种方法是将它们相互嵌套，以便所有 div 可以使用相同的偏移值，但由于它们的父级具有不同的位置，它们会获得所需的位置：

<html>
<head>
<style type="text/css">
#main {
    transition: margin-left .5s;
    padding: 20px;
    position: fixed;
    margin-left: 100px;
    width: 800px;
    height: 500px;
    top: 0;
}

.window {
    position:absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 250px;
    height: 400px;
    border:1px solid navy;

    transform: translate(5%, 5%); /* this is relative to current position */
}
</style>
</head>

<body>


<div id=main>
    <div class=window><div class=app>w1</div>
        <div class=window><div class=app>w2</div>
            <div class=window><div class=app>w3</div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

【讨论】：