Position absolute (pt. 2)

In Position absolute pt.1 it was shown that you can use this command in a text widget to place an element outside the sidebar. It was also explained that in many themes this doesn’t work well, mainly but not exclusively because of the grey admin bar that logged-in wp.com users get. Here’s a report on all themes:

Works perfectly in

Adventure Journal
Blogum
Bold Life
Chaotic Soul
Choco
Duotone
Dusk to Dawn
Fleur de Lys
Light
Misty Look
Ocean Mist
Oulipo
Quintus
The Journalist v1.9
The Morning After

In these themes the vertical placement of the element will be fixed, regardless of the presence or absence of the admin bar. The code works both with “top” and “bottom”.

Works well in

Benevolence
Brand New Day
Dusk
Elegant Grunge
Fauna
Fusion
Garland
Girl in Green
Green Marinée
Imbalance 2
K2-lite
Parament
Pink Touch 2
Redoable Lite
Solipsus
Sweet Blossoms
Twenty-eight Thirteen
Unsleepable
Vermilion Christmas

In most of these themes the vertical position of the element will be fixed (regardless of the presence or absence of the admin bar), if measured from “top”; you can’t place an element in the footer area, or anyway measured from the end of the page, because “bottom” is the bottom of the sidebar or the browser screen, not the whole page.

In Imbalance 2 both top and bottom work fine, but the element may move horizontally if you drag the browser window to make it very narrow (so this limits the possible width and positioning of an element).

In Fauna, the element will show up on the main page as well as category and other archive pages, but not when viewing single posts or static pages (see here).

In Solipsus, keep in mind that an image will automatically get a double border around it (see here how you can get rid of it).

Works so-so in

Albeo
Almost Spring
Ambiru
Andrea
Andreas 04
Andreas 09
Banana Smoothie
Beach
Black-Letterhead
Blix
Chaos Theory
Chateau
Clean Home
Connections
Contempt
Cutline
Day Dream
DePo Square
Digg 3 Column
Duster
Emire
Enterprise
Esquire
Fadtastic
Fjords 04
Flower Power
Freshy
Fruit Shake
Greenery
Grid Focus
Iceburgg
iNove
Jentri
Koi
Kubrick
Liquorice
Manifest
Matala
MLB (all three of them)
Modularity Lite
Monochrome
Motion
Mystique
Neat
Neo-Sapien
Next Saturday
Ocadia
Piano Black
Pilcrow
Pool
Pressrow
Prologue
Quentin
Regulus
Rounded
Rubric
Sandbox (all four)
Sapphire
Shocking Blue Green
Silver is the New Black
Simpla
Spectrum
Spring Loaded
Sunburn
Tarski
The Journalist v1.3
Thirteen
Toni
Treba
Twenty Eleven
Vertigo
Vigilance
White as Milk
WordPress Classic

In these themes the presence or absence of the admin bar will affect the position of an element measured from “top”: logged-out wp.com users, or non wp.com visitors, will see it 28px lower than what logged-in wp.com users will see. So, position:absolute will only do for an element loosely positioned somewhere, not if its exact vertical positioning is crucial.

Of all the themes in this column, Vertigo is the only one that allows you to place an element in the footer area (i.e. at a fixed vertical distance from the end of the page, using “bottom” in the code). In all the rest you cannot, again because “bottom” is the bottom of the sidebar or (usually) the browser screen, not the whole page.

In Black-Letterhead, Connections, Day Dream, Iceburgg, Kubrick, Sapphire, and Sunburn, the element won’t show up when viewing single posts (see here).

In Blix, the element won’t show up when viewing static pages (see here).

In Digg 3 Column, the element won’t show up unless you add this to the code (before the closing quotation mark): z-index:1;

In Grid Focus, the widget with the code must be in the “Secondary – Shared” sidebar (if you want the element on all the blog pages).

In Banana Smoothie, an image will automatically get a border around it (see here how you can get rid of it).

With regard to the code examples given in Position absolute pt.1: in Andreas 09, Esquire, Flower Power, Jentri, Motion, Neo-Sapien, Rounded, and Toni, you need to use div class=”aligncenter” instead of div align=”center” (when an element must be fixed horizontally).

In Motion, there are better alternatives: you can use a widget the normal way in the header area, and you can take advantage of a text widget in the header or footer area using position relative (examples here). Header widget area also available in Clean Home. Footer widget areas also available in several themes – see here.

Very limited or practically useless in

Adventure Journal
Bouquet
Bueno
Chunk
Comet
Coraline
Dark Wood
DePo Masthead
Forever
Fresh & Clean
Greyzed
Hemingway
Inuit Types
iTheme2
Monotone
Neutra
Nishita
Notepad
NotesIL
Nuntius
Paperpunch
Reddle
Retro-fitted
Retro MacOS
Rusty Grunge
Selecta
Skeptical
Splendio
Steira
Strange Little Town
Structure
Suburbia
Sundance
Sunspot
Titan
Toolbox
Triton Lite
Twenty Ten
Under the Influence
Vostok
Wu Wei

In DePo Masthead, the position of the element isn’t affected by the presence or absence of the admin bar, and “bottom” can be used for placing an element in the footer area; but you cannot use position:absolute for placing an element in the header area (or anyway measured from the top of the page), as “top” is the top of the bottombar.

In the rest, the element will not only be vertically displaced when the admin bar isn’t present, it will move or shrink horizontally as well if you drag the browser window to make it wider or narrower. (In some of these themes, this will only happen if you make the window too narrow. In Sunspot no vertical displacement.)

In some themes position:absolute works perfectly for an element in the footer area, provided you add the widget to one of the footer cells, not to the sidebar.

Downright useless in

Autofocus
P2
Supposedly Clean
zBench

In these themes, if you send an element outside the sidebar area via position:absolute in a text widget, it will simply vanish out of sight (apparently their CSS prescribes overflow:hidden for sidebar items).

https://wpbtips.wordpress.com/