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?

Hypercriticism

Couldn't you use position: sticky? – Jellify

position: sticky not supported by IE: caniuse.com/#feat=css-sticky – Lindie

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.

Tallula

Out of date...? – Juju

It's possible with an additional div. Please check the answer from @LaurieSpiegel – Epicureanism

Answer 2

Of course you can, just need an extra div!

<div class="fixed-wrapper">
  <div class="close-wrapper">
    <div class="close"></div>
  </div>
</div>

body
  background: gray
  height: 8000px

.fixed-wrapper
  position: fixed
  top: 20px
  left: 0
  right: 0

.close-wrapper
  max-width: 1200px
  position: relative

.close
  background: #fff
  width: 30px
  height: 30px
  position: absolute
  right: 0
  border: 1px solid #515151  
  &:before,&:after
    width: 25px
    height: 1px
    background: #515151
    content: ''
    position: absolute
    top: 50%
    left: 50%
    display: block
    @include transform(translate(-50%, -50%) rotate(45deg))
  &:after
    transform: translate(-50%, -50%) rotate(-45deg)

See this fiddle I made for you :-)

http://codepen.io/marinagallardo/pen/mJyqaN

Rodman

works! A much better answer than the accepted "it is not possible" – Kaliningrad

Best answer. Thank you! – Epicureanism

This would be a better answer with some explanation as to why it works. – Swifter

Answer 3

The best way to achieve this is to give parent element a transform css. eg:

.relative{
  transform: translateX(0); // this will act like relative parent 
}
.fixed{
  position: fixed;
  left:0;
  top:0;
  width:100%; // width will be relative to the width of .relative
}

Strychninism

Browser compatibility? – Vadnee

this acts like it's position: absolute:. Lets say you have a scroll then the fixed element will go with it. – Bryonbryony

nice one mate!!! – Bigamist

no it does not work – Alternator

Answer 4

What you want to use is position:absolute . This places the child element according to it's parent element.

Some readings here : http://www.w3schools.com/cssref/pr_class_position.asp

Armenia

No, it doesn't... It places the child element according to its parent IF its parent has position: relative; or position: absolute; set. Otherwise, its just in relation to the <html> element itself (i.e., the uppermost leftmost corner of the screen). REFERENCE: css-tricks.com/… – Riptide

Actually, let me correct myself a little: It places the child element according to the closest ancestor element that has position: fixed; or position: absolute;, then if none, it's in relation to the <html> element itself. – Riptide