Inherit the width of the parent element when `position: fixed` is applied
Tags: css, dom, javascript, jquery
Published: 2017-08-24 03:40:54

---
title: "Inherit the width of the parent element when `position: fixed` is applied"
published: true
description: A quick tutorial that will help you understand the position property when applying the fixed value.
tags: CSS, DOM, javascript, jquery
---

Earlier this year I came across a question on SOF asking how can a child element that is `fixed` inherit the width of its parent. I was shocked to see a solution that suggested using `inherit` was up-voted several times! This is not the correct solution. So I wrote a somewhat technical article on how to approach it. Here's the made-for-dev version of that answer.

The truth is, you can't use `inherit` reliably to set the width of the of the child element while its fixed. This has to do with a misunderstanding, or no understanding, of how `fixed` actually works.

### Understand Fixed

Unlike `absolute`, `fixed` **doesn't position itself from its closest relative** parent. Instead, `fixed` **positions itself relative to the viewport**. The viewport will always stay fixed, which is why you get the effect that you do.

That being said, **whenever you "inherit" any width it will be respective to the viewport**. So it does us no good when we're trying set the width of our target element to the width of it's parent.

*Learn more about the different behaviors of [position][1].*

## Quick Solutions

Now that we have a better understanding of `fixed`, here are two approaches to make this happen

### Pure CSS

We can use **pure CSS** to fix this problem, but **we would need to know the width in advance**. Suppose that its parent element is `300px;`

    .parent{
        width: 300px;
    }
    
    .parent .fixed_child{
        position: fixed;
        width: 300px;
    }

### JS

Now with **mobile devices**, we **don't** really **have** the luxury of having **set widths**, especially anything over `300px`. Using percentages won't work either, since it will be relative to the viewport and not the parent element. **We can use JS**, in this case **with jQuery to achieve this**. Lets take a look at a **function** that **will always set the width of the paren**t at the given moment:

     function toggleFixed () {
          var parentwidth = $(".parent").width();      
          $(".child").toggleClass("fixed").width(parentwidth);        
      }

css:

    .fixed{
        position:fixed;
    }

*View in [CodePen][2]*

### Dynamic Widths

That's fine and dandy, but what happens **if the width of the window changes** while the user is still on the page, changing the parent element with this? While the parent may adjust its width, the child will stay the set width that the function set it. **We can fix this with [jQuery's][3] `resize()`** event listener. First we'll need to split the function we created into two:

    function toggleFixed() {
       adjustWidth();
       $(".child").toggleClass("fixed");
     }
    
     function adjustWidth() {
       var parentwidth = $(".parent").width();
       $(".child").width(parentwidth);
     }

Now that we've separated each part, we can call them individually, we'll include our original button method that toggles the fixed and width:

    $("#fixer").click(
         function() {
           toggleFixed();
         });


And now we also add the resize event listener to the window:

     $(window).resize(
         function() {
           adjustWidth();
         })


*View in [CodePen][4]*

There! Now we have a fixed element who's size will be adjusted when the window is resized.

## Conclusion

We've tackled this challenge by understanding `fixed` position and it's limitations. Unlike Absolute, `fixed` only relates to the view port and therefore cannot inherit its parent's width.

To solve this, we need to use some JS magic, which didn't take very much with jQuery, to achieve this.

In some cases, we need a dynamic approach with scaling devices of varying widths. Again, we took the JS approach.


  [1]: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  [2]: http://codepen.io/Philll_t/pen/XMVYEa
  [3]: https://api.jquery.com/resize/
  [4]: http://codepen.io/Philll_t/pen/dvJKqQ