Okay, so I’ve been messing around with this “position tight end” thing in my little web project, and let me tell you, it was a bit of a journey. I wanted to share my experience, from start to finish, in case it helps anyone else out there.
First, I started by sketching out what I actually wanted to achieve. I had this idea of a container with a few elements inside, and I wanted one of those elements to always stick to a specific spot, regardless of how the other elements moved around. It is like a sticky notes.
So, I created a basic HTML structure. Something like this:
<div class="container">
<div class="normal-element">Normal Element 1</div>
<div class="normal-element">Normal Element 2</div>
<div class="tight-end">Tight End</div>
</div>
The “container” is just a box to hold everything. The “normal-element” divs are the things that I expected to move around normally. And the “tight-end” is the element I wanted to “stick”.
The Styling Part
Next, I jumped into the CSS. This is where the “position” property comes in. I knew I needed to do something with it, but I wasn’t entirely sure what at first.
First, I gave the “container” position: relative;. This is kind of like saying, “Hey, container, any positioning I do inside you is going to be relative to your boundaries.”
.container {
position: relative;
/ Some other styles like width, height, border, etc. /
Then, for the “tight-end” element, I initially triedposition: absolute;. My thinking was, “Absolute” sounds like it’ll stay put, right?
.tight-end {
position: absolute;
bottom: 0;
right: 0;
/ Some other styles for appearance /
I setbottom: 0; and right: 0; to try and stick it to the bottom-right corner of the container. And… it kinda worked! It did stay in the bottom-right corner. But, if the “normal-element” divs got too tall, they would overflow and the tight-end element would go out of the box.
I played around with different combinations of top, bottom, left, and right. I also tried setting a fixed height on the container, but that felt too rigid. I wanted it to be more dynamic.
After some trial and error , I finally figured out that the “tight-end” element should stay put within its parent container. And it did stay in place, even when I scrolled or added more content to the other elements!
So, that’s my story of wrestling with “position tight end.” It wasn’t a super smooth process, but I learned a lot along the way. The key, for me, was really understanding how position: relative; on the parent and position: absolute; on the child work together. Hope this helps someone!
