Fixed Position into a floated box

Question

I need a fixed position element into the floated element, I tried below snippet codes but it doesn't work, it makes fixed box width 100% based to device width, but i need it to be 100% width floated ".left-column" box

.left-column, .right-column {
    width: 20%;
    box-sizing: border-box;
    float: right;
    position: relative;
    display:inline-block;
    background: blue;
    direction: rtl;
    height:1000px;
}

.right-column {
    width: 80%;
    background:#b54930
}

.fixed-inner-box{
  width: 100%;
  border:1px solid black;
  height:100px;
  box-sizing:border-box;
  z-index:5;
  background:red;
  position:fixed
}

<div class="left-column">
    <div class="fixed-inner-box">
    </div>
</div>
<div class="right-column">
</div>

I think you have a misunderstanding of the 'fixed' position. If you want the element to stay inside and at the top of the floated element you need to use the 'absolute' position. Fixed is positioned relative to the viewport (not the parent), which means it always stays in the same place even if the page is scrolled. — IndPendent, Mar 07 '19 at 18:27

Yash009 · Accepted Answer · 2019-03-07T19:04:42.200

You can use translate to solve your problem. It is used to offset the container in this case.Replace your css with this,

CSS:

.fixed-inner-box{
  width: 100%;
  border:1px solid black;
  height:100px;
  box-sizing:border-box;
  z-index:5;
  background:red;
  position:fixed;
  left: 29.4%;
  top: 2%;
  transform: translateX(50%);
  margin-right: 1%;
}

Adjust your margin and positioning to get the desired result.Let me know if you need more help. Here is a working js fiddle Also look at this example for better understanding.

Fixed position but relative to container

Fixed Position into a floated box

1 Answers1