Semi Rant: Absolute Position when it's relative Semi Rant: Absolute Position when it's relative

I have long been against absolute position. I always felt it the "lazy" way out. Until recently, I've seen the light. Absolute positioning works extremely well inside of a relative position. In fact it works so well, that it reduces my browser testing time because IT IS actually consistent!


Absolute Positioning with CSS

It helps to begin with an example. Please don't mock me too much as I'm not a designer…

In the above example, there is a black rectangle that has a simple blue background overlapping, but resting outside of the box.

Now, with some basic HTML and CSS watch how simple it is to achieve this with an absolute position element inside of a relative image:


<div id="blackbox">
Content of the black box goes here…
<div class="bluebar"></div>
</div>

Next, some basic CSS is applied to these items:


#blackbox {
background-color: #000;
color: #FFF;
height: 300px;
width: 300px;
position: relative;
}
.bluebar {
background-color: blue;
height: 200px;
width: 30px;
position: absolute;
right: -15px;
top: 50px;
}

The above code will now achieve the exact same effect as in the picture. 15 pixels of the blue bar will be sitting in the black while the other 15 pixels are resting outside of it.

This same effect could be achieved without the absolute positioning; however, it would require using floating elements, some margin or padding to get the exact positioning. And if you have done a lot of web development, it does not always achieve the same look in the various browsers!

After fighting it for years, I'm officially a fan of absolute positioning elements with CSS – as long as it is relative to another element!

Published on Mar 21, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers | Rants

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.

Tutorials

Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.