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 示例

Answer 2

用于position:fixed第二个 div

HTML

<div class="main">
    zx
</div>
<div class="fix">
    <button>Click</button>
</div>

CSS

html, body{
    height:100%;
    margin:0
}
.main{
    height:100%;
    width:50%;
    background:grey;
}
.fix{
     position:fixed;
     top:50%;
     border:red solid 2px;
     background:yellow;
     left:50%
}

演示

Answer 3

你正在寻找position: absolute，而不是固定的——如果你的父母有类parent并且按钮有类button，你需要的类似于（假设按钮的固定宽度为 100px）：

.parent { position: relative; }
.button { position: absolute; top: 45%; right: -100px; }

这是一个示例小提琴（添加了一些宽度/高度来演示，这些应该来自您的内容）http://jsfiddle.net/WpnP4/

编辑：刚刚意识到问题不是 100% 清楚——我假设你希望按钮位于特定元素旁边并随屏幕滚动。如果position:fixed您希望按钮元素在屏幕中保持固定，请使用此选项。