Basic help with positioning; relative, static, fixed, and absolute in CSS

I have been doing a lot of reading on forums and websites about how positioning works but still have few specific questions hopefully you guys can help me with.


When you define something as relative, does that mean the positioning of it is just relative to the item closest to it? What is it relative towards. Is there any way to group items together?

If I have this code:

<div class="boxone">
Box One
 </div>

<div class="boxtwo">
Box Two
 </div>

How do you make Box Two relative to box one?

What I am doing right now is simply putting two images right next to eachother.

<div class="images">
   <img class="imagea" src="images/a.jpg"/>
   <img class="imageb" src="images/b.jpg"/>
</div>

When I position the two how do I make imageB relative to ImageA to put them next to each other? Is this even the best way to do this?

Thanks

Well, I use “position” only very rarely.
I usually try to write my HTML so elements will be where I’d like them to be even with no CSS.

But for elements that are block level that I’d rather have them not be, I do often use “display: inline-block”

This allows them to be side-by-side when the view-port is wide enough to hold them while still letting them drop when they need to without a horizontal scrollbar happening.

1 Like

After doing more research I just learned a lot about positioning and absolute and solved most of my issues. Im still working - but no need to respond to this. (sorry I coul nto find how to delete it.)
Thanks guys.

Hi,
No, when you apply position:relative; to an element without any coordinates it becomes the containing block for any absolute positioned children. It is known as the nearest positioned ancestor.

It is relative to itself, that is, it’s original space in the normal flow of the page if you apply coordinates. That is something you generally would not want to do. The reason being is that it still preserves it’s original space in the page, it is only moved visually and the original space is still there like a black hole.

You can learn all about positioning here…

Most of the time you want elements to flow in natural order of the page as Mittineague pointed out.

Other than that you can use absolute positioning in small doses, but you must preserve the space from other elements because they are removed from the normal page flow.

There is some more info on positioning here:-

1 Like

It’s great that you found the answer to your problem so well done :).

Generally we do not delete threads but in cases where the OP subsequently finds the answer to their problem we ask that they provide the solution so that it may be useful to others.

Therefore it would help if you could answer your own questions with what you found out and that will not only re-enforce your learning it will make the thread useful to others.

It will also allow us to check that you understand the points you raised and we can therefore further clarify if needed. In this way the thread suddenly becomes useful to everyone and also allows you to participate in the community.:slight_smile:

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.