当一个HTML元素在源代码中的顺序相反时，使其显示在另一个元素的顶部

Question

我正在使用list来呈现WebUI中的选项卡。我的方法要求我将LABEL元素放在DIV之前。

标签用来显示标签名称和标签的内容。

我试图在视觉上显示底部的标签和顶部的内容(即底部的标签)

我的css/html看起来像这样：

​

ul {
    list-style: none;
}
label {
    padding: 0.1em 0.2em;
    font-size: .8em;
    cursor: pointer;
    position: relative;
}
div {
    position: relative;
}

<ul>
  <li>
   <label>Tab Name 1</label>
   <div>Content for tab 1</div>
  </li>
</ul>

​

有没有人知道如何达到这样的效果？

Answer 1

使用position:relative，您可以重新排列元素。只有当你有预定义的高度时，这才会起作用。下面的代码用于预定义的高度将CSS。

​

ul {
    list-style: none;
    height: 50px;
}
label {
    padding: 0.1em 0.2em;
    font-size: .8em;
    cursor: pointer;
    position: relative;
    height: 30px;
    top: 20px;
}
div {
    position: relative;
    height: 20px;
    top: -30px;
}

<ul>
  <li>
   <label>Tab Name 1</label>
   <div>Content for tab 1</div>
  </li>
</ul>

​

如果您不确定列表的高度，请考虑在使用onload事件侦听器加载页面时使用JavaScript设置元素的top和height属性。