You know those important learning moments where a belief you’ve confidently held is determined to be abjectly incorrect? Happened to me recently. Allow me to explicate:
OK, so I’m working on my portfolio. Here’s where I started at:
As you can see, a lot going on. My intention for this landing page was to have a div which included a div of some brief descriptive characteristics of myself paired with a div containing the the following image:
What resulted:
The white border signifies the parent div (pDiv moving forward), and red and green borders signify the image element and characteristic div (cDiv) respectively. It was nice to have a basic structure, but there’s too much unused space that was wanting for more.
My remedy came when a fellow Flatiron student, Mell Basham, suggested that I extend the color stripes of the image to better fill out my page. After cutting my teeth on using GIMP, a great, free alternative for Photoshop (thanks fellow Flatiron Student Alexander Sherwin), my website started to take some form:
Alright, that’s better, but I want the cDiv to be positioned based on the location of the extended lines. Just make the image width full screen and…
Whelp, the cDiv is gone.
My frustration is mounting; the positioning of my cDiv is not going to where I want it to go. Certainly this couldn’t have anything to do with me using Tailwind for the first time (it didn’t, though Tailwind brought about other difficulties). Looking over my CSS attributes, I couldn’t diagnose the problem.
Surely the positioning of the pDiv, which I SPECIFIED as absolute, is the determinant of where the characteristic div (cDiv) is positioned relatively. Logically that makes sense, and this line of reasoning hasn’t given me any problems up until this point.
Wrong! Wrong, wrong, wrong!
I can’t tell you how I came to hear of, much less accept, this ill-conceived interpretation of the position attribute’s behavior. Perhaps I made a cognitive error by subconsciously associating the word “relative” with the parent element. Whatever the case may be, I was exasperated enough to consult documentation to get the answers that I needed. What I thought was going to be a quick fix turned into a much needed lesson in styling.
The main takeaway: THE “RELATIVE” IN A RELATIVELY POSITIONED ELEMENT MEANS RELATIVE TO ITS ALLOTTED POSITION WITHIN THE NATURAL FLOW OF THE WEBPAGE.
Because I changed the dimensions of the image element to make it fill up the width of the window, and I did not specify in my CSS to wrap my flex elements within pDiv, the presumed position of the relative cDiv will always begin at the end of the image element, which means that it will never be visible, always just outside of the window.
I was able to fix this by turning the pDiv into the a relatively positioned element, and also by turning the cDiv into an absolute positioned element. Here’s how these changes look w/o any further work:
Cluttered is an understatement, but the shift of the green cDiv shows the capability of positioning an element absolutely.
If you’ll recall the final part of my major takeaway above (“…WITHIN THE NATURAL FLOW OF THE WEBPAGE”), this distinction is important because if an element is absolute, it does not adhere to the natural flow of the page. The cDiv is absolutely placed within the pDiv, and thus any transformation made to cDiv is made within the pDiv, and cDiv cannot be placed outside of the pDiv. Let’s reposition the cDiv to reflect a slightly less cluttered webpage:
.cDiv {
flex-direction: column;
position: absolute;
top: 2rem;
bottom: 2rem;
left: 50%;
width: 50%;
}The above positioning (along with some other margin/padding attributes), we get:
So now we know that the cDiv can be moved within the pDiv as it sees fit. This was important for me in making my website dynamic; the extended lines of the image would sometimes conflict with the cDiv text as the screen got larger or smaller. Using Tailwinds dynamic capabilities, I could change the absolute positioning of the cDiv based on where the image was:
So as you can see, the absolute position gives the element flexibility within the confines of a relative positioned element, not the other way around. Changing the pDiv to relative positioning helped me place the div in what I perceived to be a better place as well. So please, think of the element itself when you see “relative,” it’ll save you a lot of headaches in the long run.
I also found this resource immensely helpful in understanding this concept and it helped me craft this blog; big thanks to those authors.
