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;
andright: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