I'm not fully understanding where to apply absolute, and relative positioning.

Relative applies to the parent of an absolute element. You're saying "I want all absolute elements (images) to be relative to this parent element". If you don't use the relative you're telling the absolute elements to be positioned according to the screen, not their parent. The absolute elements will be positioned based on the closest relative parent or the screen itself if no relative parents are present. This and the box model are always the most difficult to grasp at first.

<div style="position:relative;"> <image style="position:absolute;"/> </div>

<div style="position:relative;"> <div style="position:relative;"> <image style="position:absolute;"/> </div> </div>

When positioning something absolutely, you are taking it out of the flow of the document and saying I want it exactly here where I'm telling it to go. This is great when you want to do something like have title straddle the top border of a box or something.

Now, you need to give that exactly positioned element some coordinates so it know where it's meant to be but then you need to thinking, what are these coordinates in relation to? This is where the relative positioning comes in.

If you put your heading inside a div with the border on it, then you say that you want the heading to sit, 20px from the left and -10px from the top but you need to tell the browser that you want it to do that in relation to the div with the border.

That's why you'd set the heading to be absolutely positioned, relative to the position of the div with the border.

However, absolute positioning should not be used as a general positioning tool. If you're finding something isn't where you want it, look at the construction of your page and work out what it is you need to do to create the framework around your image so that it sits where you want it to. Absolute positioning is a hard and fast rule and as such, is totally unresponsive and will sit on top of other elements that get in it's way as they're not responding to where each other are.

Hope that helps.

You can't with absolute because like mentioned earlier absolute positioning pulls the item out of the flow of the original document. With responsive web design, the document itself is designed to be fluid, your using percent and em values in place of static values like pixels. When you use absolute positioning, it has no reference to the document because its not in flow with the document at all, so while the document will change orientation and size depending on the device it's displayed on, the absolute position item has no reference to change to because it doesn't reference anything in the first place, just the positioning from edge of the device screen. Think of it as a child with no guidance, he simply makes he's own rules based off of what he knows, but child's with parents base their rules off of what the parent knows and responds accordingly.

Yes, you can. Use relative units (%, em, vw) to position them. The key is think in a relative way. You can start with a design that's in pixels and just convert it to percentages once you get your layout where it needs to be if starting with relative units seems daunting.

You are correct on absolute positioning. Relative positioning puts your image in place relative to the other elements in your HTML. So if you have a <p> before your image, the image will be displayed after the </p>. However, the exact image location will be determined by it's float(left right or none).

Or, what Ron said.

Hello Ron, and Scott. Thanks for the input, I really appreciate it. I have another quick question. In Nick's lesson about making a site, we put images on the portfolio page, these images are responsive, they resize with the browser window. Can I use absolute or relative positioning on images that resize with the browser window?