將div放在另一個div內

Question

我有一個div（.work）作爲背景，裏面有另一個div（.subject，其中有6個）和另一個div（.slider）。我對.subject和.slider使用相同的樣式，但.slider不是放置在.subject div中。它被放置在。工作DIV

這是我得到：

<div class="work"> 
<div class="subject" id="1"> 
    <div class="slider"></div> 
</div> 
<div class="subject" id="2"> 
    <div class="slider"></div> 
</div> 

<div class="subject" id="3"> 
    <div class="slider"></div> 
</div> 

<div class="subject" id="4"> 
    <div class="slider"></div> 
</div> 

<div class="subject" id="5"> 
    <div class="slider"></div> 
</div> 

<div class="subject" id="6"> 
    <div class="slider"></div> 
</div> 

</div> 

CSS

.work { 
left: 1%; 
top: 11.5%; 
height:85.5%; 
width:30%; 
background-color: #F2F2F2; 
border-radius: 5px; 
position: absolute; 
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
      0px 1px 0px 0px rgba(250, 250, 250, 0.5); 
border: 1px soid F2F2F2(0, 0, 0, 0.3); 
z-index:-1; 
overflow: auto; 
} 
.subject { 
margin-left:auto; 
margin-right:auto; 
height:25%; 
width:90%; 
background-color:#0D7BFF; 
border-radius:1px; 
margin-top:5%; 
} 

.slider { 
top:70%; 
bottom:0%; 
left:0%; 
right:0%; 
position:absolute; 
background-color:#F2F2F2; 
opacity:0.9; 
} 

我如何能得到.slider內的所有.subject無任何建議必須爲所有主題製作單獨的css

先謝謝您

Answer 1

.slider樣式上有一個position:absolute;，表示它已超出頁面流量。

嘗試將position:relative;添加到您的.subject類中。

Answer 2

只需將position屬性的值更改爲.slider元素的relative即可。

.slider { 
    top:70%; 
    bottom:0%; 
    left:0%; 
    right:0%; 
    position:absolute; 
    background-color:#F2F2F2; 
    opacity:0.9; 
} 

jsfiddle

Answer 3

.work { 
 
    left: 1%; 
 
    top: 11.5%; 
 
    height: 85.5%; 
 
    width: 30%; 
 
    background-color: #F2F2F2; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5); 
 
    border: 1px soid F2F2F2(0, 0, 0, 0.3); 
 
    z-index: -1; 
 
    overflow: auto; 
 
} 
 
.subject { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 25%; 
 
    width: 90%; 
 
    background-color: #0D7BFF; 
 
    border-radius: 1px; 
 
    margin-top: 5%; 
 
    position:relative; /* you forgot to add the subject as parent for slider. */ 
 
} 
 
.slider { 
 
    top: 70%; 
 
    bottom: 0%; 
 
    left: 0%; 
 
    right: 0%; 
 
    position: absolute; 
 
    background-color: #F2F2F2; 
 
    opacity: 0.9; 
 
}

<div class="work"> 
 
    <div class="subject" id="1"> 
 
    <div class="slider"></div> 
 
    </div> 
 
    <div class="subject" id="2"> 
 
    <div class="slider"></div> 
 
    </div> 
 

 
    <div class="subject" id="3"> 
 
    <div class="slider"></div> 
 
    </div> 
 

 
    <div class="subject" id="4"> 
 
    <div class="slider"></div> 
 
    </div> 
 

 
    <div class="subject" id="5"> 
 
    <div class="slider"></div> 
 
    </div> 
 

 
    <div class="subject" id="6"> 
 
    <div class="slider"></div> 
 
    </div> 
 

 
</div>

你忘了做主題爲滑塊位置父。給position:relative到**主題* 8

Answer 4

片段

.work { 
 
left: 1%; 
 
top: 11.5%; 
 
height:85.5%; 
 
width:30%; 
 
background-color: #F2F2F2; 
 
border-radius: 5px; 
 
position: absolute; 
 
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 
 
     0px 1px 0px 0px rgba(250, 250, 250, 0.5); 
 
border: 1px soid F2F2F2(0, 0, 0, 0.3); 
 
z-index:-1; 
 
overflow: auto; 
 
} 
 
.subject { 
 
margin-left:auto; 
 
margin-right:auto; 
 
height:25%; 
 
width:90%; 
 
background-color:#0D7BFF; 
 
border-radius:1px; 
 
margin-top:5%; 
 
position: relative; 
 
} 
 

 
.slider { 
 
top:70%; 
 
bottom:0%; 
 
left:0%; 
 
right:0%; 
 
position:absolute; 
 
background-color:#F2F2F2; 
 
opacity:0.9; 
 
}

<div class="work"> 
 
<div class="subject" id="1"> 
 
    <div class="slider"></div> 
 
</div> 
 
<div class="subject" id="2"> 
 
    <div class="slider"></div> 
 
</div> 
 

 
<div class="subject" id="3"> 
 
    <div class="slider"></div> 
 
</div> 
 

 
<div class="subject" id="4"> 
 
<div class="slider"></div> 
 
</div> 
 

 
<div class="subject" id="5"> 
 
<div class="slider"></div> 
 
</div> 
 

 
<div class="subject" id="6"> 
 
<div class="slider"></div> 
 
</div> 
 

 
</div>

添加此

.subject { 
    margin-left:auto; 
    margin-right:auto; 
    height:25%; 
    width:90%; 
    background-color:#0D7BFF; 
    border-radius:1px; 
    margin-top:5%; 
    position: relative; // new line 

}