Подтвердить что ты не робот

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

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

Мне нужно что-то упустить, потому что люди говорят "мы можем изменить внешний вид всего сайта, просто отредактировав один файл CSS", но это будет зависеть от того, что вы все еще хотите div в том же порядке!

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

</2c >

Ответ 7

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

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

Ответ 8

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

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