Может ли CSS действительно переопределить порядок элементов HTML на странице?

Question

Если у вас есть несколько div на странице, вы можете использовать CSS для размера, плавать их и немного переместить их ... но я не вижу способа обойти тот факт, что первый 1002 * будет отображаться в верхней части страницы, а последняя div будет в нижней части! Я не могу полностью изменить порядок элементов, поскольку они исходят из исходного HTML, не так ли?

Я, должно быть, что-то упускаю, потому что люди говорят: "Мы можем изменить внешний вид всего сайта, просто отредактировав один файл CSS." *

(P.S. Я уверен, что никто не использует position:absolute для каждого элемента на странице.)

Answer 1

CSS может извлечь элементы из нормального потока и расположить их где угодно и любым способом. Но он не может создать новый поток .

Под этим я подразумеваю, что вы можете поместить последний элемент из HTML-документа в начало / верх страницы / окна, и вы можете разместить первый элемент из HTML-документа в конец / низ страницы / окна , Но когда вы делаете это, вы не можете расположить эти элементы относительно друг друга; Вы должны знать для себя, как далеко вниз будет конец страницы, чтобы первый элемент HTML-документа располагался правильно. Если этот контент является динамическим (например, из базы данных или CMS), это может быть далеко не тривиальным.

Answer 2

С плавающей и абсолютной позицией вы можете использовать довольно хорошую магию позиционирования, чтобы изменить порядок страниц.

Например, в StackOverflow, если разметка была настроена правильно, заголовок и основное содержание могут быть первыми двумя элементами в разметке, а затем навигация / поиск и, наконец, правая боковая панель. Это можно сделать, установив контейнер содержимого с достаточно большим верхним полем для размещения навигации и достаточно большим правым полем для боковых панелей. Тогда оба могут быть абсолютно позиционированы на месте. Разметка может выглядеть так:

h1 {
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  margin-top: 100px;
  margin-right: 250px;
}

#nav {
  position: absolute;
  top: 0;
  left: 300px;
}

#side {
  position: absolute;
  right: 0;
  top: 100px;
}

<h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main">
    <li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> New Zelands fish market </h4>
    ....
  </div>
</div>

Здесь важно то, что разметка должна выполняться с учетом такого рода магии позиционирования.

Изменение параметров так, чтобы навигационная панель находилась слева, а боковая панель под навигацией была слишком сложной.

Answer 3

Есть несколько способов сделать это сегодня. Первый работает на большем количестве браузеров, но более ограничен:

1. Использование отображаемых в CSS значений table-caption, table-row и table-cell позволяет вертикальное упорядочение максимум трех элементов, управляемых исключительно с помощью CSS.

2. Это намного позже и будет работать только во всех последних браузерах (да, в IE9 произойдет сбой): использование CSS-свойств flexbox.

Вы можете просмотреть примеры в реальном времени и узнать больше об этих методах на странице шаблонов " Это отзывчивый ". Два из них, о которых я говорю, находятся в разделе «Сдвиг исходного порядка»

Answer 4

Вы можете посмотреть на CSS Zen Garden , чтобы найти отличные примеры того, как делать то, что вы хотите. Множество примеров макетов по ссылкам справа, чтобы увидеть различные способы перемещения всего с использованием строго CSS.

Answer 5

Вам не нужно положение: абсолютное значение для каждого элемента, чтобы делать то, что вы хотите.

Вы просто используете его на нескольких ключевых элементах, а затем можете расположить их где угодно, перемещая все содержащиеся в них элементы вместе с корневым элементом раздела.

Answer 6

Вы можете позиционировать отдельные блоки полностью независимо от исходного порядка, используя position: absolute. Таким образом, вы можете переместить верхний и нижний колонтитулы в верхнюю часть страницы, используя CSS.

Обратите внимание, однако, что это в целом плохо для доступности: у вас должен быть порядок содержимого в источнике более или менее в том же порядке, в каком вы представляете его читателю. Причина в том, что программа чтения с экрана или подобное устройство будет отображать контент в том порядке, в котором он определен в источнике, а не в визуальном порядке, определенном вашим CSS.

Answer 7

Я думаю, что наиболее важным фактором является размещение ваших html-элементов таким образом, который имеет смысл семантически, и, если повезет, ваш макет в CSS не будет выполнять слишком много работы. Например, заголовок вашего сайта, вероятно, будет первым элементом на странице, за которым следует общая навигация, затем суб-навигация, контент и нижний колонтитул (неполный список).

Вероятно, около 90-95% макетов, с которыми вы хотите работать, должны быть относительно простыми, чтобы манипулировать этой разметкой во что-то вроде того, что вам нужно. остальные 5-10% все еще будут возможны, если приложить немного больше усилий, но вопрос, который вам нужно задать себе: «Как часто я хочу, чтобы заголовок моего сайта располагался в правом нижнем углу страницы?»

Я всегда обнаруживал, что компоновкой сайта не так уж сложно манипулировать после того, как вы захотите кардинально изменить внешний вид, по крайней мере, по сравнению с перекодировкой.

</ 2в>

Answer 8

Хорошая мысль о том, что верхний колонтитул всегда будет первым, а нижний колонтитул последним! Но я могу захотеть переместить мой рекламный DIV сверху вниз, вправо.

Еще одна вещь, о которой я слышал, - это сначала поставить контент DIV, поэтому Google уделяет вам больше внимания (релевантные ключевые слова находятся в верхней части рейтинга страницы выше) ... или это миф? Для этого потребовалась бы хитрость CSS, о которой я тоже спрашиваю.