www. Expression-Web-Tutorial .com
Call 1.866.363.5633
www. Expression-Web-Tutorial .com
Call 1.866.363.5633
Understanding the 4 different CSS Positioning Properties can be challenging, yet it's very important to your success. In addition to these properties, you must avoid the temptation to click and drag elements all over your page. Expression Web really wasn't designed to work like that. Instead, we use CSS and the Style Builder (New Style Dialog Window) to position everything.
Well, most of the time we don't even need to concern ourselves with specifying a CSS Position Property. That's because we just accept the default positioning, which is Static.
When you place a div on a web page, the CSS Positioning Property by default is Static. And we don't have to specify Static because it is the Default. If you are using layers, on the other hand, then you are using an absolutely positioned div.
I gotta tell you right now, don't use layers for the layout. A layer is used minimally. I only use a layer when I have images that I want to place in a certain vicinity of one another and even overlap. That is where a layer comes in very handy.
But if you must use a layer, or an absolutely positioned div, then in most cased you must make the parent container's positioning property Relative. Then position the layer relative to the parent container.
The screenshot above shows you the position property in the Style Builder.
If we clicked on the drop down menu next to position we would see the possible values we could choose from.
A Static Element will assume a position in the Normal Flow of the page. The Normal Flow is top to bottom (block boxes) and left to right (inline boxes). Static is the Default.
You cannot assign top - bottom - right - left values as a static element will just ignore them. Instead, the way we position static elements includes the use of floats, margins, and negative margins. We can also assign a width and/or a height to a static element.
Example: Every div used to make this web page you are looking at is Static. The Left Column is floated left. Yet, not assigned a CSS position property.
The remaining position properties alter an elements position in the normal flow in some way. Such changes will change the way elements interact with one another. In other words, the positioning scheme of an element changes the relationship that element has with the elements in the Normal Flow. Therefore, we position these elements using different techniques.
For instance, Absolute Positioning removes the element from the Normal Flow all together. An example is a Layer. A Layer is a div tag that has a position property of Absolute. (sometimes called an AP div) A Layer can be positioned in such a way to overlap other elements on the page. Layers can also be stacked. We certainly cannot do this with Static elements. (See Layers)
When making layouts, you should float the outer columns instead of using absolutely positioned divs (layers). The float property is so much better. And much easier. See the Layout Tutorial here and learn how to position columns. This will help you position other elements.
The element that is positioned absolute is not a part of the documents normal flow. Therefore, it is positioned according to the edges of the browser or the screen. Whereas, elements that are a part of the normal flow (static elements) are positioned according to their containing block.
Use top, right, bottom, and left values to position an absolutely positioned element.
An element positioned as 'Relative' will be positioned according to its original location in the normal flow.
In reality, however, we use Relative Positioning to create a new point of reference for an absolutely positioned element. This means, the absolute element will be positioned relative to a containing box given a position of 'Relative'.
An element that is Fixed is fixed within the viewport (on the screen), and does not move even when the page is scrolled.
#fixed-box { position:fixed; top:22px; left:200px;}
When using fixed positioning, you can use top, right, bottom, and left properties to position the element on the page.