Абсолютная позиция CSS

Question

Вечер всех,

У меня был вопрос о том, будет ли использование Абсолютного позиционирования в моем контексте неправильным для богов CSS. По сути, я использую его для позиционирования изображений в строке заголовка моего сайта.

Мы можем использовать SO в качестве хорошего примера. Таким образом, основным логотипом в верхней части нашей страницы является StackOverFlow, за которым следует меню. На правой стороне у нас есть вопрос. Теперь представьте, что оба эти элемента - картинки. Будет ли разумно позиционировать их так, чтобы нам не приходилось бороться с любым другим CSS-позиционированием?

Приветствия

Mike

Answer 1

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

Единственное исключение - относительное + абсолютное позиционирование. При правильном использовании это может быть невероятно полезным.

Но чтобы сделать заголовок, как на SO-сайте, я бы, вероятно, просто использовал float.

<div id="header">
  <img id="left" src="image1.png">
  <img id="right" src="image2.png">
</div>

с:

#header { overflow: hidden; }
#left { float: left; }
#right { float: right; }

В большинстве случаев эта проблема решена.

Может быть, только один из них должен быть спущен на воду. Если это тот, что слева:

<div id="header">
  <img id="left" src="image1.png">
  <div id="right">Some more content</div>
</div>

с:

#header { overflow: hidden; }
#left { float: left; width: 150px; }
#right { margin-left: 150px; }

Answer 2

Я бы сказал, что, вероятно, проще всего сделать правое изображение / div float:right

, что позволит вам плавно перемещать вещи

Answer 3

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

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

Я не общаюсь с богами CSS, но я говорю, что ваш план атаки звучит как хорошее использование абсолютного позиционирования.

Просто убедитесь, что все элементы, которые обертывают эти два элемента, position: relative

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