Skip to main content

CSS relative absolute positioning

Over my course of being a frontend web programmer, I realised that a lot of web developers dont understand how css position works. If you're a new web developer, after mobile webkit, firefox or chrome became bigger than IE, then everything is way easier to understand. The most simple explanation is this Basically if the position is static(default), the children with different position (relative, absolute) will follow the first non static position parent it has (which on the site was the body).
So for example
    <div style="position:absolute;top:10px">
        this div parent(body) is static so make that our bounds 

        <div style="position:absolute;top:10px">
            this div parent(div) is static and so its parent(body) so make body our bounds

    <div style="position:relative">
        <div style="position:absolute;top:10px">
            this div parent(div) has a non static so stop there and make it our bounds

Back when I build widgets for client site, would experience something like
    <div id="left-sidebar" />
    <div id="main-content" />
    <div id="right-content" style="position:relative;overflow:hidden">
            Some basic requirements include
            * our widget sometimes could be bigger then the right-content size of the site like expanding ads
            * we cant change the style (we cant just flip the position relative or overflow hidden of client style)
            * and a lot more

One solution (probably the only solution) for this is to attach the widget to body and position it absolute to the same spot where it originated, an advantage of that is that no matter the structure of the site is, the widget will always be relative to the body and will always be on top of the any content. That was the short solution, the longer one involves injecting a placeholder for tracking where the widget will reference to, resizing the placeholder same as the widget so that the content below will adjust accordingly, listening to window resize, listening/constant tracking of the location of the placeholder incase the items on top expands, and a lot more.

But to what I said easier, earlier I said that everything is way easier to understand right now because back when I think IE5 or IE6 days you could set position absolute plus change the z-index to super high and it will ignore the non static position and you achieved what you want (almost as if everything is bound to body). But then everything changed when mozilla and others embraced the standards and this made position more confusing, but this is good news, the only bad news is that older IE like IE7 and IE8 has bugs on different stuff like z-index or layout bugs which sometimes make you think you had everything wrong. So to end things up, like the lightbulb moment statement from the site, css position once you understand it everything is way simpler :)


Popular posts from this blog

Laravel 4.2 and App Engine

Was trying to make Laravel work with App Engine when i saw this post Laravel 4 on Google AppEngine for PHP, have tried to make it work but it seems there are some things that needs to be updated to make it work.

First off follow everything the blog until THE MCRYPT PHP EXTENSION then on that part we have to change "require": { "laravel/framework": "4.2.*", "neoxia/laravel-openssl-encryption-42": "dev-master" },
Then continue to follow the blog again. Then on THE LARAVEL 4 LOGGER, change $monolog->pushHandler(new Monolog\Handler\SyslogHandler('intranet', 'user', Monolog\Logger::DEBUG, false, LOG_PID));
Then before executing ./artisan optimize     open LaravelOpensslEncryptionServiceProvider.php, add to the top use Illuminate\Encryption\Encrypter;
Then lasty the part of UNIX_SOCKET, you could ignore it, it seems fixed for 4.2

LaMetric Python App

Creating a personal stock app for LaMetric is super simple, all you need is create an account at and have an url with your data. Depending on how you want the data to appear, the format should be in json and how it appears in the creation process.

I used appengine to host my data and used the metric data format

Here is the python code
import urllib2 import json # get stocks data using yahoo finance stocks = ['0002.HK', '0005.HK', '0011.HK', '0992.HK', '0066.HK'] url = "*" + ("%22%2C%22".join(stocks)) + "%22)%0A%09%09&" result = urllib2.urlopen(url) data = json.loads( # create frames based on the metric data format frames = [] for stock in data['query']['results']['quote']: …

Winamp Spotify Treasure hunting

Back in the days when WinAmp was huge (So was tripod and geocities), WinAmp users like to share their playlist. Most of these playlist are still available online through googling and a lot of them are actually good throwback playlist. With that in mind, I created a javascript script that would change the winamp playlist (pure text) into a spotify search link.

An example of this, say you liked the 90s rock scene. You would google "winamp playlist pearl jam silverchair" and some of the results will return with the title "Winamp Generated PlayList" and these are what we would like to treasure hunt on. Then
Click on of the result.
Right click anywhere in the page, select Inspect (Chrome) or Inspect Element (Firefox)
Select the Console
Paste this
$$('ul font small')[0].innerHTML = $$('ul font small')[0].innerHTML.split('<br>').map((val) => { return '<a style="color:white" href="spotify:search:' + encodeURIComp…