Question

我想将同一个类的一些元素放在另一个上。实际上，我想让他们处于相同的位置：

<div id="container">
    <div class="sheet"></div>
    <div class="sheet"></div>
    <div class="sheet"></div>
</div>

我也希望这些div在中心水平对齐。

.container {
    margin-left: auto;
    margin-right: auto;
}

你会怎么做？

编辑：这是我想要的，但位于中心位置： enter image description here

Answer 1

这是 FIDDLE

#container {
  position: relative;
  width: 450px;
  height: 600px;
  margin: 0 auto;
}
.sheet {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 3px 0 #666;
  -moz-box-shadow: 0 0 3px 0 #666;
  -webkit-box-shadow: 0 0 3px 0 #666;
}
.sheet:nth-child(1) {
  transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
}
.sheet:nth-child(2) {
  transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}

Answer 2

编辑：不是你需要的

正如SUMAN所说，你可以使用 nth-child（xn）。

我没有时间制作脚本，但您可以在此找到所需的所有信息： http://dannich.com/lab/css3-pseudo-classes-for-grid-with-dynamic-content/

注意：这当然不是最兼容的选项

祝你好运！

Answer 3

我的代码也适用于传统浏览器（例如IE8等）（这就是我决定使用ids）的原因。如果您不打算支持旧版浏览器，请告诉我，我会更新我的代码或查看 @ mdesdev的答案，该答案与所有现代浏览器兼容。

DEMO

<强> HTML

<div id="container">
    <div class="sheet" id='sheet1'></div>
    <div class="sheet" id='sheet2'></div>
    <div class="sheet" id='sheet3'></div>
</div>

<强> CSS

#container {

    width:150px;
    position:relative;
    left:0;
    right:0;
    margin:0 auto;
    z-index:10;

}

.sheet{
    position:absolute; 
    width:150px;
    height:150px;
    border:1px solid brown;
    background:red;

}

#sheet1{
    z-index:7;
    top:5px;
    left:5px;
    background:blue;
    }

#sheet2{
    z-index:8;
    top:10px;
    left:10px;
    background:green;
    }

#sheet3{
    z-index:9;
    top:15px;
    left:15px;
    }

Answer 4

选择 nth-child（n）来区分那些相同的类div

Answer 5

使用位置绝对：

DEMO 使用css属性position: absolute;将元素保持在彼此之上。

使用z-index排列哪个元素高于：

DEMO 使用z-index: 3;来定义上面应显示哪个元素，其中z-index中值较小的元素的数字越大。< / p>

旋转用户变换旋转

DEMO 使用transform: rotate(-7deg);轮换你的div。

Answer 6

我想我得到了你想要的东西！

<强> HTML

<div id="container">
    <div class="sheet" id='sheet1'></div>
    <div class="sheet" id='sheet2'></div>
</div>

<强> CSS

.container {
    width:300px;
    margin:0 auto;
    position:relative;
    z-index:10;
}

.sheet{
    top:auto;
    left:auto;
    vertical-align:middle;
    position:absolute; 
    width:150px;
    height:150px;
    border:1px solid brown;
    background:red;

}

#sheet1{
    z-index:7;
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

#sheet2{
    z-index:8;
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg); /* IE 9 */
    -webkit-transform:rotate(-7deg); /* Opera, Chrome, and Safari */
}

注意：从W.D代码编辑感谢他启动代码！这是挑战！

Answer 7

我最近做了这样的事情。在我的情况下，＆＃34;表＆＃34;在点击时会分开滑动，所以我只是默认为IE8扩展它们。对于其他浏览器，我做了类似的事情：

.container {
    display: flex;
}
.sheet {
   position: relative;
}
.sheet:nth-child(1) {
    left: 33%;
}
.sheet:nth-child(3) {
    left: -33%;
}

如何将元素定位在另一个元素上？

7 个答案: