Position Absolute

**rbutler** · Sep 25, 2007 14:31

I usually avoid this like the black plague, but I was playing around with a CSS Zen garden layout and wondered how I could absolutely position #linkList and keep it's content on top of the left content. I really don't see a way around using absolute positioning in this case. I'm sure I need to add position relative at some point, just not sure how.

An example can be found here:

http://midwestwebdesign.net/zen/index.html

Any help would be appreciated.

**markbrown4** · Sep 25, 2007 17:40

and wondered how I could absolutely position #linkList and keep it's content on top of the left content

You currently have #linkList on top of the other content, what is it you are wanting?

Absolute positioning is relative to the first ancestor that has a position other than static - the default.
So if you add position:relative; to #container and position #linkList absolutely top: 0; right: 0; it will be at the top corner of #container

You can also make floated content overlap by giving a negative margin equal to the width and opposite to the direction of the float. e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
.under {
	float: left; width: 200px; margin-right: -201px; border: 1px solid red;
}
.over {
	float: left; width: 220px;  border: 1px solid green
}
</style>
</head>
<body>
  <p class="under">Overlapping as if i'm not even there</p>
  <p class="over">I'm under here!</p>
</body>
</html>

**rbutler** · Sep 26, 2007 05:13

Well, I need a way to overlap content, because currently, the content in #linkList is interfering with my left content. If I were to use the float approach, how would that affect the positioning of the left content and right?

**markbrown4** · Sep 26, 2007 16:00

Well, I need a way to overlap content, because currently, the content in #linkList is interfering with my left content.

No it's not, #linkList is absolutely positioned(removed from the flow) and it's not effecting the other content on the page one bit.

Are you actually wanting the opposite, where the rest of the content doesn't go underneath your menu?
You could use margins

Code:

#preamble, #explanation { margin-right: 250px}

User Tag List

Thread: Position Absolute

Thread Tools

Display

Hybrid View

Position Absolute

Bookmarks

Bookmarks

Posting Permissions