如何将元素放置在另一个元素上？

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

<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

来源

2014-04-24 gen

你可以让你想要的东西的图片/图像/绘图？ –

@FranciscoCorrales我添加了当前状态的屏幕截图。我想要的是中心的床单。 – gen

'.sheet {position：absolute; top：0;左：0; }' – mdesdev

这里有一个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); 
}

来源

2014-04-24 15:07:11 mdesdev

我更喜欢你的例子，但我使用'id's'，因为我的例子还支持IE8和其他旧版浏览器。 –

@ W.D。 Id与传统浏览器无关，并且无法在IE8中转换;） – mdesdev

'：nth-child（）'伪类在IE8中不受支持，我不是指id，我的意思是'：nth- child（）'伪类。是的，IE8和其他传统浏览器不支持'transform'。 –

与第n个孩子（N）去那些同一类的div来区分

来源

2014-04-24 14:52:40

编辑：不是你需要的

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

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

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

祝你好运！

来源

2014-04-24 14:56:00

我不明白这是怎么相关 – gen

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

来源

2014-04-24 14:57:06

我不喜欢的ID，我想有类代替，但除了集装箱的中心位置外，小提琴看起来没问题... – gen

@gen，请参阅编辑。 –

downvoter，关心评论！ –

使用的位置绝对：

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

使用z索引安排哪个元素是以上其中：

DEMO使用z-index: 3;到定义应该显示哪个元素在其上方的数量越多的上面将从那些Z指数中价值较低的公司获得。

旋转变换用户旋转

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

来源

2014-04-24 15:05:16

我想我得到了你想要的！

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代码编辑多亏了他，开始代码！它使挑战！

来源

2014-04-24 15:06:38

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

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

来源

2014-04-24 15:37:44 rdoyle720

如何将元素放置在另一个元素上？

回答

相关问题