As a learning exercise I recreated the information from Joshua Johnson's awesome post.
Start with a simple div with a class of "photo" and place a 200x200px image inside.
<div class="photo">
<div><img src="images/wolf200x200.jpg"></div>
</div>
Set the body color to something dark. Then apply some basic styles to the photo element and give it a nice border.
body
{
background: #222;
}
.photo
{
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
}
Here is the resulting image. Nothing special but it will provide a great testing ground for our positioning experiment.
Let’s say we wanted to create the illusion that this photo was hanging from the background, connected by a small strip of tape. To pull this off, we’ll need to flex our newfound positioning muscle and leverage some pseudo elements. The first thing we want to do is use the ::before pseudo element to create our strip of tape. We’ll give it a height of 20px and a width of 100px, then set the background to white at 50% opacity.
.photo::before
{
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
display: block;
}
If we look at a live preview of our page after this code, we can see that we really screwed up our image. The piece of tape is really interfering with the flow of the document. It has bumped our image right out of its border!
Obviously, we’ve got some issues with how the pseudo element is being positioned. To attempt to fix this, let’s see what happens if we apply relative positioning to the piece of tape.
.photo::before
{
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
display: block;
position: relative;
top: 0px;
left: 0px;
}
Here is the effect of this code:
As you can see, we didn’t fix our problem. Since this didn’t work, let’s take the opposite route and see what happens if we use absolute positioning.
.photo::before
{
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
display: block;
position: absolute;
top: 0px;
left: 0px;
}
Here's what our demo looks like now. The image has moved back into it's correct postion but now the tape is in the top, left corner of the browser window.
We could nudge the tape into place with the top and left values, but that would not actually be a workable solution. The reason is that this would put the tape at a specific point on the background, where it would stay no matter what. However, the image has been automatically centered in the viewport so as you change the window size it actually moves, meaning the piece of tape won’t be correctly positioned anymore.
So now we’ve tried both relative and absolute positioning with neither providing the solution we want. Where do we turn next? As it turns out, we haven’t really gotten the full story behind absolute positioning yet. You see, it doesn’t always default to the top left of the browser window. Instead, what position: absolute; really does is position the element relative to its first non-statically-positioned ancestor (inherit doesn’t count either). Since there hasn’t been one of those in previous examples, it was simply reset to the origin of the page.
So how does this translate into useful information? It turns out, we can use absolute positioning on our piece of tape, but we first need to add a positioning context to its ancestor, the photo. Now, we don’t want to absolutely position that element because we don’t want it to move anywhere. Thus, we apply relative positioning to it. Let’s see what this looks like.
.photo
{
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position: relative;
}
.photo::before
{
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
display: block;
position: absolute;
top: 0px;
left: 0px;
}
As you can see, the pseudo element has absolute positioning applied, which means it will choose a starting point given the location of its first non-static ancestor. Since I’ve applied relative positioning to the photo, that item fits this description. So now our piece of tape will begin at the origin of the photo (even if the photo moves due to browser resizing).
Now that we have found the starting position that we were looking for, we can tweak the top and left values to nudge the tape into place. Notice that I’ve applied a negative value to the top property so the tape sticks out of the image onto the background. The left position is set to center the tape horizontally.
.photo::before
{
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
display: block;
position: absolute;
top: -15px;
left: 50px;
}
As we can see in the finished version below, combining absolute and relative positioning was exactly what we needed to pull off the effect that we were going for.
Positioning contexts can be difficult to wield if you’re attempting to implement them without a solid foundation of knowledge behind how they work. Fortunately, there are only three primary pieces of information that you need to remember to master absolute and relative positioning.
The first is that relative positioning will allow you to tweak an element’s position relative to its normal starting point. The second is that absolute positioning will allow you to tweak an element’s position relative to its first non-statically-positioned ancestor (defaults to page bounds if none is found). The final piece of information to remember is that both relatively and absolutely positioned items won’t affect the static and fixed items around them (absolutely positioned items are removed from the flow, relatively positioned items occupy their original position).