Название документа

How to Position Text and Images Exactly and Relatively

There are several ways CSS can be used to position text, images, and other content on a web page. The positioning can be exact or relative to something else.

In this article, «image» is used to indicate any content to be positioned. The article will also use the term «div» to mean any HTML container that can be positioned, which generally is a div tag but can also be p or other tag that can contain content.

Fixed Position On the Window: The image remains fixed in a position of the browser window even when the rest of the page scrolls.

Absolute Position On the Page: The image is placed in an absolute position on the page. When the page scrolls, the positioned image also scrolls.

Relative Position to Normal Position On the Page: The image is placed relative to where it would have been in the normal flow of the page.

Floating Left or Right of Content On the Page: The image floats on the left or the right of other content. The other content may wrap around the floated image.

Below is an explanation of each to help you determine which method is best for the positioning you need to do. Live examples and example source code are included.

Fixed Position

This method will position an image in the browser window exactly. The image is removed from the normal content flow of the web page.

Note that for IE7 and IE8, the web page needs a DOCTYPE tag to position the image.

Generally, the image hugs an edge of the window. But it can also be positioned anywhere within the window.

When page content scrolls, the image remains fixed in the window, unmoving.

The fixed image can be positioned relative to the edges of any corner of the window. The edges are top, left, right, and bottom. The corners are top and left, top and right, bottom and left, and bottom and right. Specifying a distance from the two edges of any corner, the image can be positioned exactly anywhere within the window.

Note the example on this page. The Willmaster.com logo is fixed to the bottom right of your browser window. The positioning is specified as 0 pixels from the bottom edge and 0 pixels from the right edge.

Here is the code for that example.

The fixed position image may bleed (a printer’s term for printed portions to be trimmed off) by using a negative value when positioning it. For a web page, «bleed» means part of the image is beyond the edge of the window and cut off.

Absolute Position

This method will place an image on the web page in exact position relative to the top-left of the page or relative to another positioned div. The image is removed from the normal content flow of the web page.

Absolute positioning can be confusing. In some circumstances, the positioning is relative to the entire document. In other circumstances, the positioning is relative to a certain div.

This is the default: The image is positioned relative to the entire document.

To position it relative to a div, give the div a position CSS definition, such as position:fixed or position:relative (but not position:static, which is the default position). Then, put the absolutely positioned image inside that div.

That’s what I did with this example using my photo as the image.

My photo above is inside a position:relative div. The image is positioned to extend beyond the left side of the div for 30 pixels.

To remove the confusion, just remember that if the image is inside a div with a position CSS definition other than position:static, the absolute position will be relative to that div. Otherwise, it will be relative to the entire document.

Relative Position

This method adjusts the position of an image in relation to where it would have been in the normal flow of the page. The image remains in the normal content flow of the web page, just it’s position is shifted.

Here is an example, the Willmaster.com logo. It’s normal position is at the left edge of the column, in the middle of this and the following paragraph.

The relative position moved the image 50 pixels in from the left and 10 pixels up. Notice that the space the image would have required is still reserved on the page.

Here is the source code for the relatively positioned image.

Floating Left or Right

This method puts the image at the left or right of other content. The content flows around the image. The image remains part of the normal flow of the web page.

On the left is an example. Notice how this and the other paragraphs above the source code box flow around the image.

Depending on the column width of this article, this paragraph may extend below the image.

Here is the source code for the above.

When an image is floated left, and there is not enough content to fill the space on the right of the image, the effect of the float can be cleared with

Any content following the above code will be below the floated left image.

Similarly, if an image is floated right, the float can be cleared with

And, if both a floated left image and a floated right image need to be cleared, it can be done with

Overlapping Content

Fixed positioned and absolute positioned images are removed from the normal flow of web page content. Thus, the images may be positioned so they are stacked.

When stacked, the image with the source code that comes later on the page will be placed on top of those that come earlier.

Unless the browser is told otherwise.

To tell the browser to stack positioned images in a different order, use the CSS z-index property.

The higher the z-index definition, the higher the image will be on the stack. z-index definitions do not need to be sequential. Negative numbers may be used. Numbers do not need to be sequential.

On the left is an example. My photo is stacked on top of the Willmaster.com logo even though the logo is last in the source code.

Here is the code used in the example:

Many images may be stacked. Adjust the stacking order with the CSS z-index property.

Using Positioning

The information in this tutorial can be used to position text, images, and other content on a web page. The examples were of an image. A div tag can be used (instead of an img tag) to position other content.

The positioning can be exact or relative to something else. Use the positioning technique best suited to what you want to accomplish.

Was this article helpful to you?
(anonymous form)

Источник

CSS: Позиционирование

Позиционирование — это управление местом расположения (позицией) элемента на веб-странице, оно контролируется с помощью CSS свойства position .

Для указания точного места расположения позиционированных элементов, используются CSS свойства: top, right, bottom и left. Они работают со всеми позиционированными элементами, кроме статических.

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

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

Поток документа

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

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент «выпадает» из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

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

При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static :

     p 
Первый абзац.
 
Второй абзац.
   

Фиксированное позиционирование

Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.

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

     img   
Текст Текст Текст Текст Текст Текст Текст Какой-то текст Текст Текст Текст Текст Текст
 
   
 
Относительное позиционирование
 
Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.
 
Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:
 
     h2 
Заголовок первого уровня.
 
Относительно позиционированный заголовок.
 
Заголовок третьего уровня.
   
 
Примечание: элементы с относительным позиционированием ( relative ) обычно используют в качестве родителя для элементов с абсолютным позиционированием ( absolute ).
 
Абсолютное позиционирование
 
Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .
 
Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .
 
     img  
Изменим расположение логотипа с помощью абсолютного позиционирования. 
Теперь логотип будет располагаться в правом верхнем углу страницы.
   
 
Перекрывающие элементы
 
Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index, чем больше его значение, тем выше будет элемент.
 
     div < position: absolute; width: 100px; height: 100px; >.div1 < background-color: #66FFFF; left: 70px; top: 0px; z-index: 1; >.div2 < background-color: #FFFF66; left: 0px; top: 30px; z-index: 0; >.div3 
z-index: 1;
 
z-index: 0;
 
z-index: 2;
   
 
Копирование материалов с данного сайта возможно только с разрешения администрации сайта 
и при указании прямой активной ссылки на источник. 
2011 – 2023 © puzzleweb.ru
 
Источник