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 http://css-tricks.com/absolute-positioning-inside-relative-positioning/. 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
<body>
    <div style="position:absolute;top:10px">
        this div parent(body) is static so make that our bounds 
    </div>
</body>

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


<body>
    <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
        </div>
    </div>
</body>

Back when I build widgets for client site, would experience something like
<body>
    <div id="left-sidebar" />
    <div id="main-content" />
    <div id="right-content" style="position:relative;overflow:hidden">
        <our-widget>
            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
        </our-widget>
    </div>
</body>

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 :)

Comments

Popular posts from this blog

New Website

Are unicorns real? We try to look all over the web for unicorns and we might have found some that you might like or watch. https://allunicornstore.app is a new site that finds interesting unicorn products or unicorn videos. If you're a unicorn lover, head over and check it out.

How to disable textfield on AS3

This took me 2 hours to find out how to disable textfield on AS3, its not the perfect solution but it seems to be the only solution. private var txtField:Textfield; ... this.txtField = this.getChildByName("txtField"); this.txtField.mouseEnabled = false; this.txtField.tabEnabled = false; and to turn it enable again: this.txtField.mouseEnabled = true; this.txtField.tabEnabled = true; You could also do this //disable input myTextField.selectable = false; myTextField.type = TextFieldType.DYNAMIC; //enable input myTextField.selectable = true; myTextField.type = TextFieldType.INPUT; While this sound cheap coz you have to disable the mouse and the tab of that component and not the component itself, it seems to be the only solution. Thanks Adobe!!!!!!!!

Unlockd Android Auto Open

Now that Unlockd has reached its doomed . Here is a script where i just downloaded android tools and automatically have my phone open, I believe you can use this for games that requires constant tapping of the screen (as long as it's not one of the fast tap one as adb has a delay). for i in `seq 1 50`; do # open the phone adb shell input keyevent 26 # keep the phone open for 8 seconds sleep 8 # close the phone adb shell input keyevent 26 # randomised sleep to make it look real sleep $[ ( $RANDOM % 10 ) + 1 ]s done if your phone has passcode for i in `seq 1 50`; do adb shell input keyevent 26 sleep 1 # swipe from bottom to up adb shell input touchscreen swipe 530 1280 1030 480 # enter your passcode adb shell input text <Your passcode> # check button adb shell input keyevent 66 sleep 8 adb shell input keyevent 26 s