[英]How to position an element on another?
我想將同一類的某些元素彼此定位。 實際上,我希望它們處於相同的位置:
<div id="container">
<div class="sheet"></div>
<div class="sheet"></div>
<div class="sheet"></div>
</div>
我還希望這些div在中心水平對齊。
.container {
margin-left: auto;
margin-right: auto;
}
你會怎么做?
編輯:這是我想要的, 但是位於中心位置:
這是一塊
#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);
}
編輯:不是您所需要的
正如SUMAN所說,您可以使用nth-child(xn) 。
我沒有時間制作腳本,但是可以在這里找到所需的所有信息: http : //dannich.com/lab/css3-pseudo-classes-for-grid-with-dynamic-content/
注意:這當然不是最兼容的選項
祝好運!
我的代碼也可以在舊版瀏覽器(例如IE8等)上運行(這就是為什么我決定使用ids
)。 如果您不打算支持舊版瀏覽器,請告訴我,我將更新代碼或查看與所有現代瀏覽器兼容的@mdesdev答案。
的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;
}
與nth-child(n)一起去區分那些相同的類div
我想我得到了你想要的!
的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 */
}
注意:從WD代碼中編輯謝謝他啟動代碼! 挑戰!
我最近做了這樣的事情。 就我而言,“表格”在點擊時會滑開,因此我只是默認情況下將它們擴展為IE8。 對於其他瀏覽器,我做了這樣的事情:
.container {
display: flex;
}
.sheet {
position: relative;
}
.sheet:nth-child(1) {
left: 33%;
}
.sheet:nth-child(3) {
left: -33%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.