Question

我有一个div（.work）作为背景，里面我有另一个div（.subject，其中有6个）和另一个div（.slider）。我对.subject和.slider使用了相同的样式，但.slider并没有放在.subject div中。它放在.work 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;
}

关于如何在所有.subject中获取.slider而不必为所有.subjects单独生成css的任何建议

提前谢谢

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

＆＃13;

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

＆＃13;

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

＆＃13;

您忘记将主题作为滑块的位置父级。将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

}

将div放在另一个div中

4 个答案: