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!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
absolute positioning
- Thread starter soniclnd
- Start date
traingamer
Programmer
Yes. If the div located within another div, that's pretty much what you're specifying.
google "css relative vs absolute position" for a whole slew of articles, esxamples and explanations.
Also search this forum.
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
google "css relative vs absolute position" for a whole slew of articles, esxamples and explanations.
Also search this forum.
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
- Thread starter
- #3
traingamer
Programmer
Yes. What are you trying to do?
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
- Thread starter
- #5
okay... if you write in an object "position: absolute; right: 0px; bottom: 0px;" it would position it on the bottom right corner of the body... is there any way i can write "position: absolute; right: 0px; bottom: 0px;"(or something like that) and have the object placed on the bottom right corner of the parent div?
traingamer
Programmer
Put the div inside the parent div and it whould work perfectly. (Tested)
style
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
Code:
<div id="content">
<p>This is inside the content div.</p>
<p>This, too, is inside the content div.</p>
<div id="absrel"><p>This absrel div will be within the content div</p>
</div>
</div>
<div id="other">This is outside the content div.</div>
Code:
body {
margin: 0px 0px 0px 25px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}
#content {
position: relative;
top: 0px;
left: 0px;
padding: 10px;
margin: 20px;
background: #666;
border: 5px solid #ccc;
width: 400px;
}
#absrel{
position: absolute;
bottom: 15px;
right: 20px;
padding: 10px;
margin: 20px;
background: #AAA;
border: 5px solid #ccc;
width: 100px;
}Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
To add to Greg's almost complete explanation: Element will be positioned relative to the first positioned parent. Check this example for how it works:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: red;"></div>
<div style="position: relative; margin: 200px auto; width: 400px; height: 200px; border: 1px solid black;">
<div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: brown;"></div>
<div style="position: absolute; width: 50px; height: 50px; bottom: 0; right: 0; background: purple;"></div>
</div>
<div style="position: absolute; width: 50px; height: 50px; bottom: 0; right: 0; background: blue;"></div>- Status
Similar threads
- Locked
- Question