Understanding Element Positioning - HTML

There are several ways to position elements using CSS. The method you use depends on what you want the position of the element to be in reference to and how you want the element to affect other elements around it. The following sections cover the three main positioning models.

Static positioning
Static positioning is the normal positioning model—elements are rendered inline or within their respective blocks. Figure shows three paragraphs; the middle paragraph has the following styles applied to it:

width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: static;

Note:Several styles have been inserted for consistency throughout the examples in this section. A border and background have been added to the element to enhance the visibility of the element’s scope and position. The element also has two positioning properties (top and left), although they do not affect the static positioning model.

Static positioning is the normal positioning model, rendering elements where they should naturally be.

Static positioning is the normal positioning model, rendering elements where they should naturally be.

Relative positioning
Relative positioning is used to move an element from its normal position—where it would normally be rendered—to a new position. The new position is relative to the normal position of the element.

Figure shows the second paragraph positioned using the relative positional model. The paragraph is positioned using the following styles (pay particular attention to the last two, position and top):

width: 350px; height: 150px;
border: 1pt solid black;
background-color: white;
padding: .5em;
position: relative;
top: 100px; left: 100px;

Relative positioned elements are positioned relative to the position they vwould otherwise occupy.

Relative positioned elements are positioned relative to the position they vwould otherwise occupy.

With relative positioning, you can use the side positioning properties (top, left, and so on) to position the element. Note the one major side effect of using relative positioning—the space where the element would normally be positioned is left open, as though the element were positioned there.

Note:The size of the element is determined by the sizing properties (width or height), the positioning of the element’s corners (via top, left, and so on), or by a combination of properties.

Absolute positioning
Elements using absolute positioning are positioned relative to the view port instead of their normal position in the document. For example, the following styles are used to position the second paragraph in Figure:

width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: absolute; top: 100px; left: 100px;

The absolute positioning model uses the user agent’s view port for positioning reference.

The absolute positioning model uses the user agent’s view port for positioning reference

Note that the positioning properties are referenced against the view port when using the absolute positioning model —the element in this example is positioned 100px from the top and 100px from the left of the view port edges. Unlike the relative positioning model, absolute positioning does not leave space where the element would have otherwise been positioned. Neighboring elements position themselves as though the element were not present in the rendering stream.

Fixed positioning
Fixed positioning is similar to relative positioning in that the element is positioned relative to the view port. However, fixed positioning causes the element to be fixed in the view port—it will not scroll when the document is scrolled; it maintains its position. The following code is used to position the second paragraph shown in Figures:

width: 350px; height: 150px; border: 1pt solid black; background-color: white; padding: .5em; position: fixed; top: 100px; left: 100px;

Note that when the document scrolls the fixed element stays put.

Elements using the fixed positioning model are positioned relative to the view port, much like absolute positioning.

Elements using the fixed positioning model are positioned relative to the view port, much like absolute positioning.

Elements using the fixed positioning model do not scroll in the view port, as shown when this document scrolls.

Elements using the fixed positioning model do not scroll in the view port, as shown when this document scrolls


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics