Блог

Главная - Вопросы по программированию - Сделать так, чтобы один HTML-элемент отображался поверх другого, когда они расположены в обратном порядке в исходном коде

Сделать так, чтобы один HTML-элемент отображался поверх другого, когда они расположены в обратном порядке в исходном коде

#html #css #user-interface #formatting #html-lists

#HTML #css #пользовательский интерфейс #форматирование #html-списки

Вопрос:

Я использую 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>

У кого-нибудь есть идея о том, как мне добиться такого эффекта?

Комментарии:

1. Можете ли вы немного подробнее объяснить макет, которого вы пытаетесь достичь? Когда вы говорите «вкладки», вы имеете в виду отображение с вкладками, но с вкладками внизу? Кроме того, можете ли вы показать нам, как будет выглядеть HML с дополнительными вкладками? (Обычно при отображении с вкладками сначала все названия вкладок объединяются, а затем после этого все разделы объединяются). Пример или иллюстрация действительно помогли бы.

2. Вы можете использовать flex для li и order или column reverse .

Ответ №1:

Используя position:relative , вы можете переупорядочить элементы. Это будет работать быстро, только если у вас есть предопределенные высоты. Приведенный ниже код работает для предопределенных высот will 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>

Если вы не уверены в высоте списков, рассмотрите возможность использования JavaScript для установки свойств top , и height для элементов при загрузке страницы с помощью прослушивателя onload событий.