如何將元素放置在另一個元素上？

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; 
} 

你會怎麼做？

編輯：這是我想有，但在定位於中心是什麼：

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

與第n個孩子（N）去那些同一類的div來區分

Answer 3

編輯：不是你需要的

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

我沒有時間做劇本，但你需要的所有信息都可以在這裏找到： http://dannich.com/lab/css3-pseudo-classes-for-grid-with-dynamic-content/

注：這當然不是最兼容的選項

祝你好運！

Answer 4

我的代碼也可以在傳統瀏覽器（如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 5

使用的位置絕對：

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

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

DEMO使用z-index: 3;到定義應該顯示哪個元素在其上方的數量越多的上面將從那些Z指數中價值較低的公司獲得。

旋轉變換用戶旋轉

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

我最近做的東西就這樣。在我的情況下，「工作表」在點擊時會滑落，所以我只是將它們默認擴展爲IE8。對於其他瀏覽器我做了這樣的事情：

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