Position images or text anywhere

I’m thinking about fun old layouts, like this one from Frito Lay (fuck Frito Lay, btw),

It would be incredibly difficult to create a layout like this with traditional divs, but there is an incredibly easy trick that I have been wanting to share with others!

Disclaimer: This type of positioning doesn't play nice on mobile, so please keep that in mind when using this to design webpages!

Step 1: Create a container

The first thing you’re going to want to do is create a container that will roughly “hold” everything you want, whether that’s links, images, or other divs. Looking up to the screenshot above, we can mentally draw a box around the square-ish area in the center of the screen. That would be our container.

To make things easy on us, let’s also set a manual height and width for our container, and give it a temporary border so we can see exactly the space we are working with.

For the purposes of this tutorial, my container is going to be really small so it fits in the little preview below - but this works at any size.

See the Pen Position Anything Anywhere – 1 by Sadness (@sadness97) on CodePen.

Here’s what the CSS looks like:

.container { width:300px; height:200px; border: 1px solid black; position:relative; }
Code language: CSS (css)

The most important part to note here is that we are assigning our container a relative position.

Without this one property, you could put an image inside of the container with position:absolute; top:10px; left:10px and it would go to the very edge of the screen. Here is a codepen that demonstrates this:

See the Pen Position Anything Anywhere – 1 (Container) by Sadness (@sadness97) on CodePen.

I made the container smaller in order to illustrate better. In the example above, the pink heart has position: absolute; top:10px; right:10px; but the globe has the exact same setting. The difference is that the heart is inside of the container which has position:relative, which makes the container actually contain the images!

Step 2: Add your items inside of the container

Once your container is set up, you can start adding things inside of it! Here is the tricky part though (and honestly, it’s not even that tricky, mostly just tedious).

You’ll need some way to identify each item you’re placing, so you can set it with the appropriate positioning. I like to assign classes to assist with this. I usually just pick a keyword that represents the item itself.

In the example below, I placed five items and assigned them each a class.

See the Pen Position Anything Anywhere – 1.5 (Container) by Sadness (@sadness97) on CodePen.

Step 3: Add CSS positioning to each item to place them where you like

I want to emphasize how much easier it is doing this kind of thing on CodePen or somewhere you can watch your code update automatically. Especially if you’re bad at math…

To position, for example, the heart, I just add:

.heart { position:absolute; top:50px; left:40px; }
Code language: CSS (css)

Here is an example of how I placed them in my demo:

See the Pen Position Anything Anywhere – 3 (Position Items) by Sadness (@sadness97) on CodePen.

Step 4: Defy boundaries???

There’s one more thing I want to mention, which makes working with this even cooler.

You’re not completely bound by the container. By using position: absolute with negative values will allow you to place an item right outside

Let’s say I wanted to align some items like they were sitting on top of the box. All I need to do is position them with position:absolute and top:-35px

The top position pixel value will be different for everything depending on the size of the object you’re moving, which is why it’s necessary to either have precise calculations or manipulate it in real time.

See the Pen Position Anything Anywhere – 2 (Add Items) by Sadness (@sadness97) on CodePen.

This is such a cool way to add little flair to your website, such as Dollz sitting on top of your divs, or hanging decorations from the top of your page.

Once you grasp exactly how you manipulate images this way, it will transform the way you design websites!



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

Leave a Comment