How to Have a Fixed Div Next to a Parent Div

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

How can I have a fixed div next to a parent div?

Your main problem is that the element with position: fixed is always relative to the body. It behaves differently from elements with position: absolute, which is relative to parent element with position: relative declared.

So the main problem is, that if you set left to the fixed element, it sticks to left edge of body element, even if it's parent is positioned relative. But you could use a trick, and skip left declaration for fixed element.

.main {

    /*just for visualisation*/

    width: 300px;

    height: 1500px;

    background: #ccc;

}

.main, .fake-wrapper {

    float: left;

}

.fixed {

    position: fixed;

    top: 50%;

}

<div class="main">

<!-- your content -->

</div>

<div class="fake-wrapper">

    <div class="fixed">

        <a href="/">click!</a>

    </div>

</div>

Fixed position but relative to container

Short answer: ~~no.~~ (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Make a fixed div the same width as parent div and it's padding

What if not to state paddings for parent, but margins for nested div

.panel {
   width: 100vw;
   height: 100vh;
}

.fixed {
   position: fixed;
   width: calc(100vw - 70px);
   height: calc(100vh - 20px);
   margin:  10px 60px 10px 10px;
}

position a child div inside a fixed positioned parent div

A parent does not take into account the size of the absolute child. According to MDN:

Absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block

If you put something after the absolute element, it goes on top, because the absolute element is no longer in the document flow.

You can do position: relative; left: 8.33%; right: 8.33%, or just leave it as static with margin: 0 8.33%;, or if you do absolute, you can set .modal { margin-bottom: [height of absolute DIV] }, if the height is set and won't change.

I am unable to create fixed div relative to parent element

You're nearly there, just few modification on the markup and some CSS (especially overflow: auto rule) will make your day !

So mainly we'll do :

put the buttons (left and right) directly under .products_wrapper.
apply position: relative to ..products_wrapper so the buttons can be positioned relatively to it.
wrap all div.product_wrapper into a div that will have the overflowing elements (scroll) and at the same time allow the buttons to remain at their places.

Here's a demo containing the wanted result :

For the demo purposes, I get rid of the loop and manually added some elements with .product_wrapper class (products).

.products_wrapper {

  position: relative; /** to allow the button to position relatively to it **/

}

.prod_scroll_btn {

  position: absolute;

  /** next two lines center the buttons vertically **/

  top: 50%;

  transform: translate3d(0, -50%, 0);

  background: #fff;

  border: 1px solid black;

  padding: 40px 20px;

  cursor: pointer;

}

.products_wrapper .scroll_btn_left {

  left: 0;

}

.products_wrapper .scroll_btn_right {

  right: 0;

}

/** the new wrapper for the products **/

.cards {

  display: flex;

  flex-wrap: nowrap; /** no line breaks **/

  width: 100%;

  overflow-x: auto; /** allow horizontal scroll if needed **/

}

.cards .prod_zoom_btn {

  display: flex;

  justify-content: center;

  align-content: center;

  border: none;

  cursor: pointer;

  overflow: hidden;

}

.cards .prod_zoom_btn img {

  height: 100%;

}

<!-- fontawesome -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />

<!-- the "buttons" are now directly under ".products_wrapper" -->

<!-- the products (".product_wrapper") are wrapped into a "div" having "cards" as its class -->

<!-- I also used images from "https:placeholder.com" to have some basic images for the test -->

<div class="products_wrapper">

  <button class="scroll_btn_left prod_scroll_btn no_bd"><i class="fas fa-chevron-left"></i></button>

  <button class="scroll_btn_right prod_scroll_btn no_bd"><i class="fas fa-chevron-right"></i></button>

  <div class="cards">

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

    <div class="product_wrapper">

      <button class="prod_zoom_btn">

        <img src="https://via.placeholder.com/150" alt="phone Image" />

      </button>

    </div>

  </div>

</div>

Fixed position of content until parent div ends

Use position: sticky that makes the element fixed in place until it encounters the edge of it's container:

window.onscroll = function() {

  myFunction()

};

var floating1 = document.getElementById("floating1");

var yOffset = 765;

function myFunction() {

  if (window.pageYOffset > yOffset) {

    floating1.classList.add("sticky");

  } else {

    floating1.classList.remove("sticky");

  }

}

table {

  width: 100%;

  min-height: 2000px;

}

table tr td {

  vertical-align: top;

}

.sticky {

  position: sticky;

  top: 87px;

}

<table>

  <tr>

    <td style="background: red; width: 200px;">

      ...

    </td>

    <td style="background: green; width: 200px;">

      <div id="floating1">

        Floating content

      </div>

    </td>

  </tr>

</table>

<div style="height: 1500px; background: blue;">

  ...

</div>