Help:Wiki University Wikitext--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
- Broken Links
- Image Embedding
- Image Tooltips & Borders
- Image Links
- Images & Text; Embedding PDF
- Snipping Tool & Paint
- Inline Styling
- Changing Fonts
- Font Colors
- Font Bold-Italics
- Div Tag - Intro
- Width and Height
- Alignment - Horizontal
- Breadcrumb Trails
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 320 pixels from the top and 110 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:110px. If we had used left:210px, the sidebar would not be covered.
- NOTICE top:320px.
- So what happens if you don't specify the position in pixels? It is placed up against the object above it.
Absolute placed INSIDE of 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]