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 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:
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.
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;
top: 100px; left: 100px;
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.
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:
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 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:
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 do not scroll in the view port, as shown when this document scrolls.
HTML Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Page Layout With Tables
Introducing Cascading Style Sheets
Creating Style Rules
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Defining Pages For Printing
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.