Размещение div внутри другого div

Question

У меня есть div (.work) в качестве фона, внутри которого я получил еще один div (.subject, получил 6 из них) и еще один div внутри (.slider). Я использую тот же стиль для обоих .subject и .slider, но .slider не размещается внутри div .subject. Он расположен в .Работы 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 для всех .subjects

Спасибо заранее

Answer 1

У вас есть position:absolute; по телефону .slider, что означает, что он выходит из строя страницы.

Попробуйте добавить position:relative; в ваш класс .subject.

Answer 2

Просто измените значение position на relative для элемента .slider.

.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 

}