CODEWITHSUNDEEP
cssvue.jspositionfixed
Jake
Jake

Reputation: 39

How to position child element fixed in Vue?

I am having trouble figuring out why an element will not stay fixed relative to it's parent in Vue. It's only relative to #app. How can I get a child element to be 100% of it's parent in Vue with a position of fixed.

HTML:

 <div id="app">
   <div class="parent_relative">
     <div class="child_fixed"></div>
   </div>
 </div>

CSS:

.parent_relative{
    position: relative;
    width: 500px;
    height: 20px;
    border: 1px solid green;  
}
.child_fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: blue; 
}

The picture below is what it looks like: enter image description here

The search bar has a div around it with position fixed. It should not be on the top of the browser. It should be within the dark div that you see below it.

Upvotes: 0

Views: 2021

Answers (1)

pistevw
pistevw

Reputation: 432

An element with position: fixed; is relative to the viewport, not the parent. Maybe, what you're searching for is position: absolute; which is relative to it's parent.

Upvotes: 1

Related Questions