Positioning Container Elements

Transcription

1 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 are used to set the left and top offsets, but you can use any standard measurements including s. 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.

2 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.

3 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 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 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.

4 The table below provides a short reference for the relative and absolute positioning properties you were just introduced to. Values of position: Property relative absolute Places an object relative to its normal position. The surrounding objects maintain their original positions. 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.

5 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 from the left edge of its parent container. The top edge of the box will be 100 from the top of the parent container. The box has been sized to 100 by 100 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> This is the blue box!

6 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 top left right bottom width height overflow vertical-align Specifies how content should behave when positioned. (see below) Sets how far the top edge of an element is above or below the top edge of its parent element Specifies the position of the left edge of an Specifies the position of the right edge of an Specifies the position of the bottom edge of an Sizing Properties Specifies the width of a block Specifies height of a block Content Handling Properties Specifies what the content should do that extends beyond its block area. Specifies the vertical alignment of an object within its container. static relative absolute any standard measurement and standard measurement visible hidden scroll baseline, sub super, top text-top, middle bottom, text-bottom length%