html - 我怎样才能在父 div 旁边有一个固定的 div？

Question

我正在尝试获取一个在父 div 旁边带有按钮的 div。像这样:

____________
|relative  |
|          |
|          |
|          |_______
|          | fixed |
|          |_______|
|          |
|          |
|__________|

固定的 div 必须在滚动期间固定，但始终在父级旁边，而不是在其父级之下或之上。

我怎样才能做到这一点？

Answer 1

您的主要问题是带有 position: fixed 的元素总是相对于主体。它的行为不同于具有 position: absolute 的元素，后者相对于声明了 position: relative 的父元素。

所以主要问题是，如果将 left 设置为固定元素，它会粘在 body 元素的左边缘，即使它的父元素是相对定位的。 但是您可以使用一个技巧，跳过固定元素的left 声明。

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

这是一个 JSFiddle example