Did I solve the problem the right way? Positioning a sticky element

HTML-CSS
1

Hi, I realized I have to dive into several subjects to be able to build a dropdown menu without getting stuck for hours…

So now I have problem with positioning a sticky element. I did found a solution but I’m not sure if it’s the right way of solving it regarding to sticky elements.

Problem
Inside a div with overflow:scroll; I placed an element called: .exampleElementStickyBlue between 2 <p> elements. I don’t know which property I should use inside the css of this element to position the element to the right side of the div. Is it even possible to achieve this? Using the property: right does not align the element to the right side of the parent element.
View demo

Solution
I have made a container called .containerSticky around .exampleElementStickyBlue . Give it display:flex , flex-direction: row; , justify-content:flex-end;, position:sticky;, top:0;. Now the element is on the right side just how I want it.
View demo

I deleted z-index, position:sticky;, top and right (right didn’t even work) property from the .exampleElementStickyBlue because is not needed anymore.

So did I solve the ‘problem’ the right way?

I asked chatGPT and it says:

Add right:0; to .containerSticky, to make it stick to the right.

But it is already on the right side without this property right?

You should add position:sticky, top:0; and right:0; to .exampleElementStickyBlue because the child element does not inherit these properties from the parent element.

Is this true? Is my code invalid this way?

chatGPT confuses me

2

Hi. I’m not clear from your post what you’re trying to achieve. I had a look at both demos and they look very cool to me. Can you explain a bit more what result you are trying to achieve on the page or link to a project elsewhere that you are trying to achieve.

It’s not a good idea to ask chatGPT.

3

Are you saying you want the green sticky element to be placed on the right side of its container?

The element is full width, so you can’t place it to the left or right. It would need a width, and then you can use left: 100% on it.

I believe the reason why left and right behaves differently on sticky elements compared to fixed (or absolute) is because a sticky element is identical to a relative positioned element, except for the scroll container behavior where it sticks to the offset given. So you can’t use right: 0 like you can with a position fixed/absolute element to place it to the right.

1 Like
4

Actually what I want to achieve is pretty simple, but maybe because my english grammar is not so good, it might be difficult to understand. :clown_face:

Okay I’ll try it again :winking_face_with_tongue:

What do I want to achieve?: Aligning the blue element to the right side of the container.

What is my question?:

  1. In this case. Is this the right way of aligning a sticky element to the right in a container? Or is there an other way that’s more efficient?
  2. Is it true what chatGPT says?
In the first demo the blue element is staying on it's default position. The left side of the container (scroll).

You can see in the CSS that I made an attempt to have the blue element to the right side of the container. I tried giving it the property: right:0; to align it to the right side of the container. Unfortunately it failed.

.exampleElementStickyBlue{
    padding: 20px;
    width: 250px;
    height: 250px;
    background-color: rgb(0, 0, 150);
    color: white;
    position: sticky;
    top:0;
    right: 0;
    z-index:1;
}

As a solution. I wrapped a div around the blue element with class: .containerSticky. I used flexbox to align the blue element to the right side. I also assigned top:0; to make the container stick. This way, the blue element also sticks and is aligned to the right side of the container.

.containerSticky {
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  position:sticky;
  top:0;
  z-index:1;
}

I removed these properties from the blue element because I think it is not necessary for the element. It is already in .containerSticky.
position: sticky; top:0; right: 0; z-index:1;

.exampleElementStickyBlue{
    padding: 20px;
    width: 250px;
    height: 250px;
    background-color: rgb(0, 0, 150);
    color: white;
}

But chatGPT says I still need these properties for the blue element because a child element can not inherit position:sticky;, top, bottom, left, right, z-index

Let me know if you need more explanation.

1 Like
5

I was talking about the blue sticky element :smiley:
and thank you for the explanation about the behaviors of left and right!

6

I somehow missed that, sorry.

Anyway, left: 100% should work. But I prefer the Flexbox solution, I usually prefer the container do the layout when possible.

1 Like
7

Maybe you do not have a scroll container in left-to-right direction,
the right atrribute for sticky position is related to the distance between itself and its nearest scroll container.