Question

从下面的小提琴中，我试图让'内部导航'div绝对定位，以便它固定在'比较显示'框内。我遇到的问题是，当你滚动时，'内部导航'div不会保持固定。我该如何解决这个问题？

这是我的小提琴：

HTML代码

<div class="compare-display">
    <div class="table">
        <div class="source-compare col-50">
            <div class="page"></div>
        </div>
        <div class="navigation-compare">
            <div class="inner-navigation"></div>
        </div>
        <div class="target-compare col-50">
            <div class="page"></div>
        </div>
    </div>
</div>

CSS代码

.table {
    display: table;
    height: 100%;
    width: 100%;
}
.table > div {
    display: table-cell;
    vertical-align: top;
}
.table > .col-50 {
    width: 50%;
    background: green;
}
.compare-display {
    position: relative;
    overflow: auto;
    height: 200px;
}
.compare-display .navigation-compare {
    min-width: 50px;
    background: blue;

}
.compare-display .page {
    margin: 20px;
    height: 500px;
    background: orange;
}
.compare-display .inner-navigation {
    position: absolute;
    width: 50px;
    top: 0;
    bottom: 0;
    background: red;
}

Answer 1

认为您想要position:fixed而不是position:absolute。

Fiddle

CSS Position Documentation

Answer 2

围绕'.compare-display'换行固定div并从'.compare-display'中删除相对位置。

像这样：

jsfiddle.net/Cd9eZ/4

.compare-wrapper {
    position:fixed;
}

.compare-display {
    /*position: relative;*/
}

<div class="compare-wrapper">
    <div class="compare-display">...</div>
</div>

Answer 3

这是你想要的吗？

http://jsfiddle.net/Cd9eZ/3/

 .compare-display .inner-navigation {
   **position: fixed;**
   width: 50px;
   top: 0;
   bottom: 0;
   background: red;
 }

如果要将导航粘贴到窗口，绝对不起作用。 Absolute不会从页面流中删除元素，因此滚动将始终移动绝对定位的元素，因为引用框架是页面本身，而不是窗口。

固定元素完全从页面流中删除，并且根植于窗口空间本身。

绝对div不会滚动页面

3 个答案: