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

Question

вечера Все,

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

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

Cheers,

Майк

Answer 1

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

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

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

<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

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

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

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

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

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

Answer 3

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

, что позволит вам переложить вещи вокруг жидко