Позиционирование заголовка без перемещения остальной страницы вниз

Question

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

Я пробовал padding-bottom, но он перемещает страницу вниз, судит поле внизу и ничего не делает. Пробовал плавать, выравнивание. По какой-то причине высота линии не влияет. Единственное, что имеет небольшой эффект: position: absolute; и line-height, работали вместе с этим, однако он сдвинул его чуть слишком далеко вниз, и теперь мне это нужно всего на несколько пикселей выше. line-height не будет поднимать больше, чем 2px, и я также попытался использовать% во всех вышеперечисленных.

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

h2 { 
    padding-left: 45%; 
    position: absolute; 
    line-height: 2px; 
} 

Answer 1

Вы можете найти эту позицию: абсолютная вызовет у вас некоторые проблемы. Это потому, что вы вынимаете его из обычного потока, поэтому он больше не будет держать свое место. Если вы столкнулись с проблемами, попробуйте вместо этого указать позицию: relative. Это должно сохранить его в потоке и в сочетании с top: 2px должно немного сдвинуть его.

Некоторые другие варианты, которые вы также можете попробовать, включают в себя margin-top: 2px или padding-top: 2px (при использовании положения: относительный). Причина, почему padding-bottom не работала, заключалась в том, что вы добавляли над ней дополнительное «дополнение»/пробел, а не над ним.

Имеет ли это смысл? Пожалуйста, задавайте любые вопросы.

Answer 2

При использовании position: absolute добавления маржи не повлияет на позицию.

Попытайтесь использовать top: 2px, он будет позиционировать элемент 2 пикселя сверху. Также line-height: 2px выглядит довольно хаки, если размер шрифта не равен 1px, я бы не использовал его.

h2 { 
    padding-left: 45%; 
    position: absolute; 
    top: 2px; 
} 

Подробнее о позиции собственности: http://www.w3schools.com/cssref/pr_class_position.asp