Question

我在一个相对容器中有一个固定的div，但是在固定div上的顶部和左侧似乎没有工作，因为它们应该在相对容器内？

我对固定位置的理解是它是相对于窗口而不是任何容器？

参见示例：相对容器内的固定div https://jsfiddle.net/jfcb92mx/2/

<div class="relativecontainer">
<div class="fixedContainer">
    This is experimental
</div>

<div class="otherContainer"></div>
</div>

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

.otherContainer {
    height:1000px;
    background-color:#bbb;
}

示例2：没有相对容器的固定div https://jsfiddle.net/LekhuleniB/0kmn7xrk/

<div class="fixedContainer">
    This is experimental
</div>

<div class="otherContainer"></div>


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

.otherContainer {
    height:1000px;
    background-color:#bbb;
}

我错过了什么吗？

Answer 1

你写这个小提琴时没有错误

 <div class="relativecontainer"<

而不是

    <div class="relativecontainer">

尝试通过纠正它然后给相对容器的相对位置它将工作正常

相对容器内的固定位置无法按预期工作？

1 个答案: