Fixed position relative to parent element [duplicate]

Question

I am relatively new to CSS. I have run into a problem where I am trying to fix an element next to its parent element. I am able to do so with the following code:

Parent element:

#search_results{
position:relative;
}  

Child element:

.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}

This works fine until the browser window is resized. When that occurs, the fixed element overlaps its parent element. You can see my problem here: Twittiment

I am trying to fix the child element to the top of the page and the right-hand side of the parent element. Any ideas?

Answer 1

Edit:

You can use position: sticky; which can be relative to the parent element.

body > div {
  height: 300px;
  background-color: #ddd;
  overflow: auto;
  margin-top: 70px;
}

div > div {
  height: 1000px;
  position: relative;
}

span {
  display: block;
  height: 20px;
  background-color: tomato;
  position: sticky;
  top: 0;
}

<div>
  <div>
    <span>This is a relatively sticky header</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
  </div>
</div>

---

Old Answer:

As per CSS Spec, the element positioned fixed is fixed to the viewport and not the containing element.

So the short answer is NO, you cannot have a fixed position element relative to it's parent element. You can use position: absolute; instead and tweak the top left right bottom parameters on the run using jQuery/JS.