Расположить элемент так, как если бы он был первым
Моя ситуация примерно такая:
<div id = "container">
<p id = "first">...</p>
<p id = "second">...</p>
</div>
Я хочу, чтобы second стоял перед первым, как если бы он был первым в HTML. Если возможно, это должно быть без изменения стиля container или first, чтобы не влиять на другие макеты. Вариант использования заключается в том, что второй абзац из плагина, поэтому нет контроля над другими элементами.
ОБНОВЛЕНИЕ: забыл упомянуть, я тоже не могу использовать Javascript.
Вы можете расположить второй элемент относительно первого с помощью positon:relative в css или использовать функцию Javascript для перемещения элемента в объектной модели документа.
Ответы 4
#first { order: 2;}
#second {order: 1;}
используйте приведенный выше код в своей таблице стилей
или
<div id = "container">
<p id = "first" style='order:2'>...</p>
<p id = "second" style='order:1'>...</p>
</div>
order применяется только к «Элементы Flex, элементы сетки и абсолютно позиционированные дочерние элементы контейнеров Flex и Grid» (developer.mozilla.org/en-US/docs/Web/CSS/…) — мы не знаем, имеет ли место что-либо из этого на самом деле, и мы не знаем, можно ли добавить что-либо из этого или нет, с требованием OP сохранить текущий макет.
Если #container является флексбоксом, вы можете переместить #second на первую позицию, используя order: -1.
#container
{
display: flex;
}
#second
{
order: -1;
}<div id = "container">
<p id = "first">first</p>
<p id = "second">second</p>
</div>Если нет, вы можете переместить элемент в верхнюю часть контейнера с помощью position, но это фактически не изменит порядок элементов, и вам, скорее всего, придется стилизовать контейнер или другие элементы, чтобы предотвратить рендеринг #second поверх другого элемента. . Если у #container есть position: relative, это немного поможет вам, так как вы можете переместить элемент прямо наверх с помощью top: 0 и position: absolute вместо того, чтобы использовать отрицательное фиксированное значение top и position: relative, но не зная точно, какие стили применяются к #container, мы не могу знать наверняка.
Поскольку вы не можете стилизовать ни #container, ни его дочерние элементы, ваши возможности очень ограничены.
Можете ли вы протестировать с помощью flexbox?
#container {
display: flex;
flex-flow: column wrap;
}
#first {
order:2;
}
#second {
order:1;
}
Флексбокс может помочь вам здесь.
В зависимости от того, хотите ли вы макет столбца или строки, вы можете установить свойство flex-direction для элемента .container.
Вы можете присвоить ему значение row-reverse или column-reverse
.container {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.item {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 20px;
} <div class = "container">
<span class = "item">Example 1</span>
<span class = "item">Example 2</span>
<span class = "item">Example 3</span>
<span class = "item">Example 4</span>
<span class = "item">Example 5</span>
</div>в зависимости от ваших требований.
Вы можете использовать функцию prepend().