html - 固定位置到 float 框

Question

我需要一个固定位置元素到 float 元素中，我尝试了下面的代码片段但它不起作用，它根据设备宽度使固定框宽度 100%，但我需要它是 100% 宽度 float “.left-column”框

.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>

Answer 1

您可以使用翻译来解决您的问题。在这种情况下它用于偏移容器。用这个替换你的 css，

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%;
}

调整您的 margin 和定位以获得所需的结果。如果您需要更多帮助，请告诉我。这是一个工作 js fiddle另请查看此示例以更好地理解。

Fixed position but relative to container