Advanced Lesson Group 3 - Element Positioning with CSS
Positioning Container Elements
The position: style property is used to move block elements to a specific location on the web page. The position style property with the left: and top: style properties which are used to define the element's offset which is how far the element should be moved. The offset values is what is used to position an element on the page. Generally pixels are used to set the left and top offsets, but you can use any standard measurements including percentages. You can also set a right: and bottom: offset, but they are generally not used as much but are helpful if you want something placed along the right or bottom of the web page such as a sidebar or footer. An element that is positioned on the page should also have a width and height property defined.
The position: style property must be defined before the left: and top: properties will become active because the browser needs to know how to handle the rest of the content on the page when something is repositioned. There are four possible values for the position property, but we will only be working with the two most commonly used ones, the relative and absolute positions.
Relative Positioning
The relative position property offsets an element from its original position yet still holding the original placement of the element as to not affect the natural flow and placement of the remaining elements on the page. Relative positioning can be used if you want to adjust an element without affecting the remaining elements on the page.
Absolute Positioning
The absolute position property completely takes an element out of its natural flow and other elements on the page will act as if the absolute positioned element is not there. The absolute positioned element will be offset from the browser edges. The absolute positioned object will be placed on top of other natural flowing elements on the page, so when positioning elements, you need to make sure that you are not covering up anything important, such as a navigation bar or content.
If a parent element has a position of absolute or relative defined, any positioned child containers will remain positioned within the the parent container. If the child container's position is set to absolute, its position will be based off the edges of the parent container. If it is positioned relatively, its position will be based off its natural position within the parent element.
If the parent element does not have a position property applied, the absolute positioned child elements will be based off the edges of the grandparent element if it has a
position property defiend, or the body element.
The illustrations below shows how a placed when the parent element does not have a position applied and how it behaves when the parent element does have a position applied. In the left example, the child element is taken out of the parent element, the the right example the child element is positioned inside the parent element because the parent element is also positioned.
The table below provides a short reference for the relative and absolute positioning properties you were just introduced to.
Values of position: Property
relative Places an object relative to its normal position. The surrounding objects maintain their original positions.
absolute
Places an object in a specific position on the page relative to the page. The original
placement is not held and surrounding objects adjust their positions.
Putting it all together
Style definitions that control the sizing and positioning of a container should be written as an ID. IDs are used only once generally to define a specific container element, which might include the size and position of the container. In the ID definition below, the position style property is set to relative, so the container is just being adjusted from it original position. The left edge of the box will be 100 pixels from the left edge of its parent container. The top edge of the box will be 100 pixels from the top of the parent container. The box has been sized to 100 pixels by 100 pixels and given a background color. When applied to the <div> container, the container is sized and moved to its new location.
#box { position: relative; left: 100px; top: 100px; height: 100px; width: 100px; background-color: #ccffff; }
Once the ID has been defined, it can be applied to the container
<div #id="box" > This is the blue box!
</div>
The table below is a consolidated reference to the style properties that are used when creating containers. Any time a container is positioned, it should also include a specific height and width. If the container includes content, the overflow property should also be defined.
.
Property Description Accepted Values Positioning Properties
position
Specifies how content should behave when positioned. (see below) static relative absolute top
Sets how far the top edge of an element is above or below the top edge of its parent element
auto percentage pixels
left
Specifies the position of the left edge of an element.
auto percentage pixels
right Specifies the position of the right edge of an element.
auto percentage pixels
bottom Specifies the position of the bottom edge of an element.
auto percentage pixels
Sizing Properties
width Specifies the width of a
block element.
any standard measurement
height Specifies height of a block element. and standard measurement
Content Handling Properties
overflow Specifies what the content should do that extends beyond its block area.
visible hidden scroll auto
vertical-align
Specifies the vertical alignment of an object within its container.
baseline, sub super, top text-top, middle bottom, text-bottom length%
