Help:Wiki University HTML-- Position - Absolute
Jump to navigation Jump to search
Here is an example of a relative positioned object that has a red border with an absolute positioned blue box placed inside it.
- Nesting Lists
- Fonts - Changing
- Font Size
- Font Colors
- Font Bold-Italics
- Width and Height
- Tables - Borders
- Tables - Widths
- Tables - Captions
- Tables - Col Labels
- Tables - Cells
- Tables - Rows
- Tables - Placement
- Tables - Sorting
- Tables - Scrolling
- Tables - Col Only
- Tables - Col Spans
- Tables - Row Spans
- Infobox - Creating
- Infobox - Placing
- Infobox - If function
- Position - Relative
- Position - Absolute
ABSOLUTE POSITIONING[edit | edit source]
- It is like relative positioning, but it differs as it does not create a space in the flow of the page.
- Absolute position will cover up anything in that spot even another absolute positioned object.
Here is an object which we place 120 pixels from the top and 120 pixels from the left side of the page.
- NOTICE our object covers part of the sidebar.
PLACING AN ABSOLUTE POSITIONED OBJECT[edit | edit source]
Here is the coding for our absolute positioned object:
- NOTICE position:absolute.
- NOTICE left:120px. If we had used left:220px, the sidebar would not be covered.
- NOTICE top:400px.
- So what happens if you don't specify the position in pixels? It is placed up against the object above it.
ABSOLUTE INSIDE RELATIVE POSITIONING[edit | edit source]
- One of the main problems with absolute positioning; if you add new material the absolute positioned object will not move like relative positioning does.
- Here's the coding:
- NOTICE the absolute positioned blue box coding is between the opening and closing div tags in red.
- You can have as many absolute positioned objects as you want between the opening and closing div tags of relative positioned objects.
TRY THESE OUT . . . .[edit | edit source]