Question

我正在尝试使用父div旁边的按钮获取div。像这样：

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

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

也许有人知道这个问题的解决方案。请告诉我。

Answer 1

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

<强> DEMO

Answer 2

我想我可能会为您提供解决方案。主要问题是，position: fixed元素始终与身体相关。它的行为与position: absolute的元素不同，后者相对于声明了positiono: relatvie的父元素。

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

<div class="main">
  <!-- your content -->
</div>
<div class="fake-wrapper">
  <div class="fixed">
    <a href="/">click!</a>
  </div>
</div>

这应该是你的css：

.main {
  /*just for visualisation*/
  width: 300px;
  height: 1500px;
  background: #ccc;
}
.main,
.fake-wrapper {
  float: left;
}
.fixed {
  position: fixed;
  top: 50%;
}

以下是一个有效的例子：jsFiddle example

Answer 3

你正在寻找position: absolute，而不是修复 - 如果你的父母有班级parent且按钮有班级button，你需要的是什么（假设按钮）固定宽度为100px（）：

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

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

编辑：刚刚意识到这个问题并非100％明确 - 我原以为您希望按钮位于特定元素的旁边并随屏幕滚动。如果您希望按钮元素在屏幕中保持固定，请使用position:fixed。

修复了父div旁边的div

3 个答案: