Question

我正在做单页面应用程序，你可以在页面上打开多个自定义窗口（不是浏览器标签/窗口，而是用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;
}

有什么想法吗？

Answer 1

尝试将position: absolute添加到所有div，并使用left: <num>px和top: <num>px来定位它们。确保包含元素为position: relative，否则div将相对于＆＃34;视口＆＃34;绝对定位。

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

Answer 2

好的，这适用于一些警告：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%);
}

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

Answer 3

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

Answer 4

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

另一种方法是将它们相互嵌套，使得相同的offset值可用于所有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>

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

4 个答案: