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

Html – CSS how to animate a div with a "position: fixed" child

I have a setup basically like this:

<!DOCTYPE html>
<html>
<body style="margin: 0;">
    <div id="container" style="width: 50%; margin: auto; background-color: yellowgreen;">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
            Quis autem vel eum iure reprehenderit qui in ea 
        </div>
        <div style="position: fixed; bottom: 1em; width: inherit; background-color: rgba(250, 250, 100, 60%); ">
            <p style="text-align: center; font-weight: bolder; font-family: sans-serif;">OVERLAY</p>
        </div>
    </div>
</body>
</html>

The user can scroll the text and the overlay will stay fixed at the bottom of the screen,
its width matching the width of the text thanks to width: inherit.

note: width: 100% actually doesn’t work here, probably because of the fixed position.

Now, say I want to animate this with a sliding motion (like going to the next slide in PowerPoint).
I would use transform: translate(-100vw, 0); transition: 1s;, but when I apply a translation to the first div, the size of the overlay changes and its position is no longer fixed !

<!DOCTYPE html>
<html>
<body style="margin: 0;">
    <div id="container" style="width: 50%; margin: auto; transform: translate(0px, 0px); background-color: yellowgreen;">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
            Nemo, enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
            Quis autem vel eum iure reprehenderit qui in ea 
        </div>
        <div style="position: fixed; bottom: 1em; width: inherit; background-color: rgba(250, 250, 100, 60%); ">
            <p style="text-align: center; font-weight: bolder; font-family: sans-serif;">OVERLAY</p>
        </div>
    </div>
</body>
</html>

transform: translation(0px, 0px) was added to the first div

How can I apply a translation to the text and the overlay without breaking the overlay ?

Edit: found an explanation (but no solution)

From the position MDN docs:

Fixed positioning is similar to absolute positioning, with the exception that the element’s containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    After hours of trial and error I finally found a working solution using an extra div + margin and transition:

    <!DOCTYPE html>
<html>
<body style="margin: 0;">
    <button style="position: fixed; font-size: 2em;" onclick="move()">move</button>
    <div id="container" style="transition: margin-left 3s;">
        <div style="width: 50vw; margin: auto; background-color: rgb(86, 205, 50);">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
                Quis autem vel eum iure reprehenderit qui in ea 
            </div>
            <div style="position: fixed; bottom: 1em; width: inherit; background-color: rgba(255, 255, 0, 0.6); ">
                <p style="text-align: center; font-weight: bolder; font-family: sans-serif;">OVERLAY</p>
            </div>
        </div>    
    </div>
    <style>
        #container.animate {
            margin-left: -200%;
        }
    </style>
    <script>
        function move() {
            document.getElementById("container").classList.toggle("animate");
        } 
    </script>
</body>
</html>

    It does the job well enough for me so I'll be validating the answer
    (in 2 days because I can't do it sooner apparently ?? good design SO)


  2. 0

    About the Problem

    you want to translate the content div without translation effect on overlay.

    Code

    • I have added translation effect on the content div like -40vw to check its working or not its working fine.

    • I think there may be implementaion issue on your side. if this doesn’t fix your issue will you mind to share you full code.

     <!DOCTYPE html>
<html>
<body>
    <div style="width: 50%; margin: auto; background-color: red;">
        <div style="transform: translate(-40vw, 0); transition: 1s;">
    
            Aliquam sem et tortor consequat id porta nibh venenatis. Morbi tristique senectus et netus et. Integer eget aliquet nibh praesent. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Magna fermentum iaculis eu non diam phasellus vestibulum. Cras semper auctor neque vitae tempus quam. Auctor elit sed vulputate mi sit. Ultrices gravida dictum fusce ut placerat orci. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Posuere ac ut consequat semper viverra nam libero. Non enim praesent elementum facilisis leo vel fringilla. Elementum curabitur vitae nunc sed velit dignissim sodales. Nulla facilisi cras fermentum odio eu feugiat. Mauris rhoncus aenean vel elit.
            
            Rhoncus dolor purus non enim praesent. Elementum nibh tellus molestie nunc non blandit massa. Velit egestas dui id ornare arcu odio ut sem nulla. Maecenas sed enim ut sem. Gravida neque convallis a cras semper auctor. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Hendrerit dolor magna eget est lorem ipsum dolor sit. Aenean et tortor at risus viverra adipiscing. Dui ut ornare lectus sit amet. Nunc id cursus metus aliquam eleifend mi. At urna condimentum mattis pellentesque id nibh. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Duis at consectetur lorem donec massa sapien faucibus. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Quis risus sed vulputate odio ut.
            
            Non odio euismod lacinia at. Lobortis feugiat vivamus at augue eget. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ut placerat orci nulla pellentesque dignissim enim sit amet. Cursus turpis massa tincidunt dui ut ornare lectus sit. Pulvinar pellentesque habitant morbi tristique senectus et. Arcu dictum varius duis at consectetur lorem. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Tristique magna sit amet purus gravida. Aliquet sagittis id consectetur purus. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Sed viverra tellus in hac habitasse platea dictumst. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Consequat id porta nibh venenatis cras sed felis.
  
        </div>
        <div style="position: fixed; bottom: 1em; width: inherit; height: 5em; background-color: pink;">
            <p>OVERLAY</p>
        </div>
    </div>
</body>
</html>
    • I attatched an url of the SS.

    https://postimg.cc/Fk4MP0wk

    Login or Signup to reply.
  3. 0

    It does not work like that, I mean generally it’s as you say: fixed element will take as positioning reference the viewport.

    But in this exact html case you are trying to achive an impossible, transform creates containing block even for children that are fixed.

    In other words the containing block for a fixed-position descendant of a transformed element is the transformed element itself, not the viewport.

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

Back To Top
Search