Question 222862 in Html Question posted in
Some basic documentation can be found here.

Html – Tailwind.css – a "fixed" element is out the parent "container" element

I’m coming to you, requesting your gentle help.

I have a fixed element that is displaying outside the container parent element on big screen…Basically, it is "fixed" from the view port point of view and not from the parent relative element.

enter image description here

How can I fix it ?
enter image description here

Thank you for your help !

If you need any additional information, please let me know
Best regards,

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found what I was looking for...

    <!-- Parent -->    
<div class="relative container max-w-screen-xl bg-slate-200 pb-4">
  <!-- Child - fixed element -->
  <div class="fixed w-full max-w-screen-xl bottom-[10%] flex flex-row justify-end pr-16"></div>
</div>

    Thank you for your help ! Best regards, LN


  2. 0

    yes, that’s what fixed elements do (i.e. they are at a fixed position in the viewport/window). Use position: absolute to position an element relatively to its parent. And apply position: relative to the parent in this case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search