CSS: Fixed position relative to parent?

Question

I have a Wordpress Template with a specific div being nested somewhere in the overall structure. It has those stylings:

#fdm-ordering-sidescreen-tab {
    position: fixed;
    top: 25vh;
    right: 0;
    width: 64px;
    height: 64px;
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    z-index: 101;
    padding: 14px 12px 10px 12px;
    cursor: pointer;
    box-sizing: border-box;
}

I always thought that position: fixed; right: 0 should be absolute to the overall viewport, i.e. on the right side of the browser directly besides the scrollbar. But it isn't. It seems to be relative to its parent, i.e. right: 0 relative to some other centered div.

Can I, without changing HTML structure, move it to the very right side of the viewport, and if possible, also make it scroll with the scrolled viewport?

Thanks

`position: fixed` is relative to the viewport. So it should stay there! Can you please give us a screenshot of what you are getting now vs what you are expecting? — Akhilesh B Chandran, Mar 11 '21 at 12:27
Thanks for the comment. I'm getting this: https://imgur.com/ph6HREH -> You can see, it's in the inner div, not fixed to the outer viewport. Maybe because a parent container contains some strange CSS? I'd expect it very much to the right side (arrow). — tim, Mar 11 '21 at 13:51
That's strange! If you could share the URL of the page, I could take a quick peek at it. — Akhilesh B Chandran, Mar 11 '21 at 18:09

score 1 · Accepted Answer · answered Mar 16 '21 at 14:37

1

This is caused by the fact that the containing div : <div class="fusion-text fusion-text-2" .... has transform: translate3d(0,0,0);

Your fixed div now becomes connected to the transformed element. It kind of treats the transformed element as the viewport.

Will wordpress let you move it out of the containing div?

Check out this SO post answer on this topic

And this : W3C Spec

answered Mar 16 '21 at 14:37

ShanieMoonlight

1,623
3
17
28

Oh, thanks, that was completely new to me. Do you know whether there is a method to move a div from a plugin to a different body-section? Because I'm really not aware there is :( I can just enable the plugin, the rest is history, it automatically generates its code in the main div – tim Mar 16 '21 at 18:19
Edit: Found the problem, it's in the fusion builder plugin... https://theme-fusion.com/forums/topic/fusion-text-shortcode-adding-inline-style-of-transform3d-to-all-elements/ I removed the line adding the transform element -> works. – tim Mar 16 '21 at 18:30
@tim Cool, glad to help – ShanieMoonlight Mar 18 '21 at 20:40

CSS: Fixed position relative to parent?

1 Answers1