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

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

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

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

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

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

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

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

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

</2c>

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

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

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

Например, с 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>

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

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

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

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

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

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

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

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