Question

我有一个父div标签<div class="parent">，当我加载并隐藏它时，我会立即加载所有问题。当用户点击该标签时，问题是特定于标签的，屏幕上会显示这些标签特定问题

<div class="parent">
<div class="labelsBRAND" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsSTYLING" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsSTYLING" style=""></div>
</div>

最初，它的所有显示都是

.labelsWARDROBE {
 display: none;
}
.labelsSTYLING{
  display: none;
}
.labelsBRAND{
  display: none;
}

我显示那些标签被点击的问题，问题是屏幕上显示的问题非常随机，一些从顶部显示，另一些从中间显示，其他从中间显示，我的屏幕高度也增加了使它笨拙，不固定，如何使用CSS从顶部定位所有问题。我尝试了父级div的类，但是再次显示问题的位置标签BRAND与labelWARDROBE不同

.parent{
 position: relative;
 top: -20px;
}

我将此CSS用于标签

.labelsWARDROBE {
  position: relative;
  top: -10px;
  display: none;
}
.labelsSTYLING{
  position: relative;
  top: -50px;
  display: none;
}
.labelsBRAND{
  position: relative;
  top: -80px;
  display: none;
}

但是我根据我的判断通过查看问题的位置，它不是动态的，如何使其动态，并且每当点击标签时，问题应该从顶部开始显示

Answer 1

你快到了。只需从您的CSS中删除top: -...px即可。上/左/下＆amp;右用于绝对定位。在你的情况下你不需要那个。 Css＆amp;如果您将所有元素放在相对位置，那么html足够聪明，可以始终从顶部开始。所以你的CSS应该是这样的：

.labelsWARDROBE {
  position: relative;
  display:none;
}
.labelsSTYLING{
  position: relative;
  display:none;
}
.labelsBRAND{
  position: relative;
  display:none;
}

我也为你做了一个小提琴：https://jsfiddle.net/d8m4L2nL/1/

在这个小提琴中，所有选项都定位于相对＆amp;可见。您只需设置一些类display: none即可查看效果。

Answer 2

如果是这样，那么所有DOM元素都是Div，那么你可以尝试div{position:relative}。没有必要让它更复杂

div {
position:relative;
}

<div class="parent">
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsBRAND" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefef</div>
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsBRAND" style="">efefefe</div>
<div class="labelsWARDROBE" style="">fefefe</div>
<div class="labelsSTYLING" style="">efefef</div>
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsSTYLING" style="">feeffe</div>
</div>

从顶部定位所有div元素

2 个答案: