Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

position:relative

Status
Not open for further replies.
Cullen411

Cullen411

Programmer
Aug 17, 2005
89
GB
I get slightly confused sometimes with position:relative

Here's an example
"background-color: #c9ebe3; position: relative; height: 50px; padding:10px"

Wouldn't it have been just as easy to not have used position:relative;? Isn't this just a case of using position:static?
 
Sort by date Sort by votes
It is. There is no reason for the code in question to use position: relative; Sometimes, when working with absolutely positioned elements, position relative is imperative to define the boundaries of the absolutely positioned element. Other than that, I can't find a desperate need for it.
 
Upvote 0 Downvote
Hi Vragabond, thanks for your response. Sometimes some of the tutorials just complicate things. Why was the title of the page called "floating tables" - that complicates it even more.

Would you be able to expand on "Sometimes, when working with absolutely positioned elements, position relative is imperative to define the boundaries of the absolutely positioned element. " I'm not exactly sure what you mean?

thanks again.
 
Upvote 0 Downvote
Sorry Im still slightly confused. I've created an example below with a navigation div absolutely positioned and a content div that uses position:relative.

Is this what you are getting at? And If so what are the benefits of using the relative rather than just using position:absolute and left:200px?


<html>
<head><title>css</title>
<style type="text/css">
#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;
border:1px solid #000000;
}

#content {
position: relative;
top: 0;
left: 200px;
width: 200px;
border:1px solid #CCCCCC;
}

</style>
</head>
<body>

<div id="navigation">
<ul>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
</ul>
</div>

<div id="content">
<h1>test</h1>
<p>test test test test test</p>

</div>


</body>
</html>

thank you.
 
Upvote 0 Downvote
In your example the navigation will be absoltuley positioned relative to the body element of the document, effectively the browser viewport.

If your navigation element was INSIDE another element then it would be positioned relative to THAT parent element ONLY if the parent element was also positioned somehow.

If it wasn't positioned then the navigation would be positioned in relation to the first parent element that DOES have a position applied to it.

So, you may need to apply position:relative; to a parent element to prevent peculiar results when you try to absolutely position child elements within it.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Foamcow, apologies for my ignorance.
have you any code that could clear this up.

thanks.
 
Upvote 0 Downvote
I suggest searching for a beginners' tutorial on CSS positioning. Without visual examples, it is, as you've found, quite hard to get across the reasoning behind the use of positioning something.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

OsakaWebbie
  • Locked
  • Question
position:relative and line wrapping 1
Replies
11
Views
42
OsakaWebbie
OsakaWebbie
BrotherArnold
  • Locked
  • Question
Position:Relative causes scrollbars in small window
Replies
8
Views
234
BrotherArnold
BrotherArnold
Jakobud
  • Locked
  • Question
Position:Relative .....relative to what???
Replies
2
Views
30
Boomerang
Boomerang

Part and Inventory Search

Sponsor

Back
Top