CSS Positioning

For some reason, is not working for me...

.box1{
border: 1px  solid #000000;
width: 100px;
height: 50px;
postion:absolute;
left:10px;
top:150px;
}

Code (markup):

Ref: http://www.w3schools.com/Css/pr_class_position.asp

 

Define, "not working for me...".

See http://www.catb.org/~esr/faqs/smart-questions.html

cheers,

gary

 

Though I think surely, if this box isn't sitting where you want it to while using asbolute positioning, you likely just don't know where it's referencing to.

When you asbsolutely positioning something, those coordinates you give it are based on the nearest positioned parent or ancestor. If you have no positioned parents, the body (basically, the screen) becomes the reference-- starting at the top left corner of the screen.

But if there's a positioned parent somewhere, then the top left corner of that box is used! Not the screen.

<div style="position: relative;">
<div style="position: asolute; left: 200px; top: 5px;">
stuff in the div
</div>
</div>

The first div has a position. Thus, the second div will not be 200px left from the screen-- it will be 200px left from the left border of the first div.

Don't waste your time at w3schools. That site is old and doesn't explain things worth a crap.

 

Thanks, Stomme poes. I've think i got it now.

 

http://www.barelyfitz.com/screencast/html-training/css/positioning/ this might help. I always find myself referring back to this site.