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

【问题标题】：How to position an element on another?如何将一个元素定位在另一个元素上？
【发布时间】：2014-04-24 14:50:29
【问题描述】：

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

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

我还想让这些 div 在中心水平对齐。

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

你会怎么做？

编辑：这是我想要的，但位于居中：

【问题讨论】：

你可以制作你想要的图片/图像/绘图吗？
@FranciscoCorrales 我添加了当前状态的屏幕截图。我想要的是中间的床单。
.sheet { position: absolute; top: 0; left: 0; }
@mdesdev 我需要它在中心
好的，我正在做一些 Fiddle ;)

标签： html css position css-position

【解决方案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);
}

【讨论】：

我更喜欢你的例子，但我使用了id's，因为我的例子还支持IE8和其他旧版浏览器。
@W.D. Id 与旧版浏览器无关，您无法在 IE8 中进行转换；)
:nth-child() 伪类在 IE8 中不受支持，我不是指 id，我是指 :nth-child() 伪类。是的，IE8 和其他旧版浏览器也不支持transform。
没问题。但是有一个问题，如何才能获得像您的帖子中这样的 jsfiddle 按钮？ (:
感谢您的回复！

【解决方案2】：

编辑：不是你需要的

正如 SUMAN 所说，您可以使用 nth-child(xn)。

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

注意：这肯定不是最兼容的选项

祝你好运！

【讨论】：

我看不出这有什么关系

【解决方案3】：

我的代码也可以在 legacy 浏览器（例如 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;
    }

【讨论】：

我不喜欢这些 id，我想改用类，但是小提琴看起来不错，除了容器的中心定位...

【解决方案4】：

使用 nth-child(n) 来区分那些相同的类 div

【讨论】：

【解决方案5】：

我想我得到了你想要的！

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 代码编辑感谢他启动代码！它带来了挑战！

【讨论】：

【解决方案6】：

使用绝对位置：

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

使用 z-index 排列哪个元素在哪个之上：

DEMO 使用z-index: 3; 来定义哪个元素应该显示在哪个元素上方，上面的数字越大，z-index 中的值越小。

To Rotate 用户变换旋转

DEMO 使用 transform: rotate(-7deg); 旋转您的 div。

【讨论】：

【解决方案7】：

我最近做了这样的事情。在我的情况下，“工作表”会在点击时分开，所以我只是让它们在默认情况下为 IE8 展开。对于其他浏览器，我做了这样的事情：

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

【讨论】：