absolute position question

**nofel** · Mar 16, 2010 04:14

hey folks, i m clearing my misconception abt absolute position. i had few question.
what is the use of absolute and how does it differ from relative?
i made some simple css but the div menu seems 5px; bigger to the right side. whereas i gave its width 100%. why is this happening?

Code CSS:

.header{width:100%; height:200px; background:#006295;}
.body{width:100%; height:800px; background:#C5EFFD;position:relative;top:-10px;}
.menu{width:100%; height:50px;background:#9BE1FB; position:absolute; top:170px;}

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheets/sandbox.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="header"></div>
<div class="body"></div>
<div class="menu"></div>
</body>
</html>

**ralph.m** · Mar 16, 2010 05:46

If you remove default paddings etc. all will fit together.

Code:

* {margin:0;padding:0;} /* for testing only */

The natural space for a relatively positioned element is preserved even if the element is moved, while the natural space for an absolutely positioned element is lost (and the other elements don't see it any more).

Don't use abs pos for layout like this.

**nofel** · Mar 16, 2010 05:58

i was learning the difference b.w abs and rel position. so that came into my mind

**RyanReese** · Mar 16, 2010 11:11

Absolute positionining removes elements from the flow. No other elements (not even other absolutes) recognize it is there.

It's like a ninja. It can go anywhere.

Relative positioning makes an element relative to itslef. If you try and move the element via top/bottom/right/left offset properties it will move the element visually but not physically.

**candlebain** · Mar 16, 2010 13:08

Well said Ryan!

**nofel** · Mar 16, 2010 13:40

lol ryan i like the way u explained. its like a ninja so abs isn't good. i guess coz if other element can't recognize its there. they can create problem.

Off Topic:

Hey ryan. been a long time. how u doing?

**RyanReese** · Mar 16, 2010 13:51

Yes you are correct. For layouts you don't want AP. But r ather use floats instead

.

AP is fine for small design details or other small segments.

Off Topic:

Hello, are you ammark? I recognize your avatar.

If not then I apologize. I see so many people on here lol

**nofel** · Mar 16, 2010 14:04

Off Topic:

yes i m me

**Stomme poes** · Mar 16, 2010 14:35

lol ryan i like the way u explained. its like a ninja so abs isn't good. i guess coz if other element can't recognize its there. they can create problem.

Well, now, let's not be so down on ninjas. Sometimes a ninja is exactly what you need: we use absolute positioning often in certain techniques, such as Gilder-Levin image replacement (for example). Or, a CLOSE button on a lightbox div.

The important thing to remember about position: relative (since you already now have the important thing about absolute) is that when you make a box (say, a div), it's position: static.

When you say "position: relative" on that box, what you actually are doing is making another box. You don't see it. The specs call this a "generated box" and it has on it everything you could see on the old box: any borders, backgrounds, and children it had.

The original box becomes invisible, and generally this doesn't matter if you don't add any coordinates because the new box is sitting precisely over the old box.

When you start adding coordinates like top and left, then you may have a problem if you don't know what's happening: the old box doesn't move. It continues to take up space right where you created it.

The box you see moving is the new box. So a common question some people have with relative positioning is, why do I have this extra unwanted space and how do I get rid of it?

Another thing to be aware of is, because this new box is sitting "above" the old box (like a new sheet of paper sitting over another sheet of paper), it has a higher z-index naturally (so, even if you don't state "z-index", it is still sitting a bit higher than the other static boxes on the page). So when you're moving this new box around, it covers the other boxes.

Absolutely positioned boxes also have a naturally higher z-index; this is even higher than the relatively positioned boxes. I think of abso-po'd boxes as like mattresses floating on the surface of the ocean while all the other boxes are on the ocean floor. They can't see the mattress, and the matress can't see them (other than its nearest positioned ancestor of course : )

They do all have a place where they belong. None of them are evil or even Bad Things To Use. They're bad only because people start out using them right away, when the real goal is to keep elements acting naturally and in the flow as much as possible (unless you are doing a l33t ninja CSS trick : )

**RyanReese** · Mar 16, 2010 14:38

Originally Posted by Stomme poes

Absolutely positioned boxes also have a naturally higher z-index; this is even higher than the relatively positioned boxes.

No they don't.

Absolutely positioned elements normally just appear on top because they appear later in the source order and since z-index:auto is default for all positioned elements, AP elements will appear on top.

They don't have a naturally higher z-index

. It's all "auto" (not including hte IE z-index bug where it makes the default value "0")

**nofel** · Mar 16, 2010 14:45

lol, way too much info for my little brain. though i like the depth of poes explaination. though it got me confused. which one is it. abs position have higher z-index or like ryan said its coz of it comes latter in code

**RyanReese** · Mar 16, 2010 14:47

All positioned elements come with a z-index:auto (lets forget about IE)

That means that elements that come later in the source code will naturally stack on top because they come later in the HTML

Stomme Poes was mistaken I'm afraid

**Stomme poes** · Mar 16, 2010 15:08

I may be. Now I have to go make a test! (because what if they aren't later in the source?)

**RyanReese** · Mar 16, 2010 15:10

Say you have element1. That element1 is RP.
Element2 is AP

If the HTML is
<element1 />
<element2 />

Element2 w ill be on top (assuming it's positioned that way)

Say the HTML is switched up
<element2 />
<element1 />

Element1 will be on top since it's later in the HTML.

RUn all the tests you want Stomme

.

**Stomme poes** · Mar 17, 2010 01:41

RUn all the tests you want Stomme

And so I did, though not til now because I just got to work : )

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <title>AP</title>
    <meta name="description" content="AP vs RP">
    <style type="text/css">

body {
  padding: 0 15px 15px;
  background-color: #fc0;
}

p {
  margin-left: 30px;
}

#ap {
  position: absolute;
  left: 50px;
  top: 40px;
  width: 400px;
  height: 400px;
  background-color: #0f0;
}

#rp {
  position: relative;
  top: 10px;
  width: 400px;
  height: 200px;
  background-color: #f00;
}

    </style>
  </head>
<body>
  <p>Static body</p>
  <div id="ap">Abso-po'd</div>
  <div id="rp">Rel-po'd</div>
</body>
</html>

The point being, not to prove you wrong, but to see it for myself : )