На этом шаге мы рассмотрим определение стиля для врезки.
Для оформления внешнего вида врезок нам необходимо добавить класс pulled к скопированному элементу <span> и присвоить этому классу в таблице стилей следующие свойства:
.pulled {
background: #e5e5e5;
position: absolute;
width: 145px;
top: -20px;
right: -180px;
padding: 12px 5px 12px 10px;
font: italic 1.4em "Times New Roman", Times, serif;
}
Теперь текст врезки будет отображаться другим шрифтом на светлосером фоне с дополнительными отступами. Но самое важное, что врезка будет иметь абсолютное позиционирование и располагаться на 20 пикселей выше и на 20 пикселей правее ближайшего предка в дереве DOM (имеющего абсолютное или относительное позиционирование). Если для предка не определен режим абсолютного или относительного позиционирования (отличного от static), врезка будет позиционироваться относительно элемента <body> документа. По этой причине в программном коде, использующем методы библиотеки jQuery, нам необходимо присвоить родительскому элементу, включающему копируемый текст врезки, свойство стиля position: relative.
Позиционирование по верхней границе кажется достаточно очевидным, но может быть не совсем понятно, как блок врезки позиционируется на 20 пикселей правее своего предка. Сначала мы получаем полную ширину блока врезки, которая складывается из значения свойства width и величины отступов слева и справа, то есть: 145 рх + 5 рх + 10 рх, или 160 рх. Затем мы выбираем значение свойства right класса врезки. При значении 0 в этом свойстве правый край врезки выравнивался бы по правому краю родительского элемента. Следовательно, чтобы поместить левый край врезки на 20 пикселей правее родительского элемента, необходимо сместить ее правый край в отрицательном направлении на расстояние, на 20 пикселей превышающее ее полную ширину, то есть на -180 рх.
На следующем шаге мы рассмотрим программную реализацию врезки.
