Html 如何在父div旁边有一个固定div？

我正在尝试获取一个父div旁边有一个按钮的div。如下所示：

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

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

---

我怎样才能做到这一点呢？

您正在寻找的是

位置：绝对

，而不是固定的--如果您的家长有class

家长

，并且按钮有class

按钮

，您需要的类似于（假设按钮的固定宽度为100px）：

这里有一个提琴示例（添加了一些宽度/高度来演示，这些应该来自您的内容）

---

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

position:fixed

。

您要查找的

位置：绝对

，而不是固定的-如果您的家长拥有class

parent

并且按钮拥有class

按钮，则您需要的类似于（假设按钮的固定宽度为100px）：

这里有一个提琴示例（添加了一些宽度/高度来演示，这些应该来自您的内容）

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

HTML

第二个div使用
位置：fixed

HTML

您的主要问题是
位置为固定的元素始终相对于主体。它的行为不同于声明了
位置：绝对
的元素，后者相对于声明了
位置：相对
的父元素

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


.main{
/*只是为了观想*/
宽度：300px；
高度：1500px；
背景：#ccc；
}
.main，.假包装{
浮动：左；
}
.固定{
位置：固定；
最高：50%；
}
您的主要问题是
位置：固定的元素总是相对于主体。它的行为不同于声明了
位置：绝对
的元素，后者相对于声明了
位置：相对
的父元素

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


.main{
/*只是为了观想*/
宽度：300px；
高度：1500px；
背景：#ccc；
}
.main，.假包装{
浮动：左；
}
.固定{
位置：固定；
最高：50%；
}

您有以前尝试过的产品吗？如果是这样的话，你能发布你的代码吗？固定的意思是当你滚动页面时它不会移动。绝对的意思是，当页面滚动时它会移动，但是添加元素不会影响它的位置。你想要什么？你有以前试过的东西吗？如果是这样的话-你能发布你的代码吗。“固定”意味着如果你滚动页面，它永远不会移动“绝对”意味着，当页面滚动时它会移动，但添加元素不会影响它的位置你想要什么？好吧，我修复了按钮，但如何“附加”它在父div旁边。有办法使用jQuery吗？@MmynameStackflow因为我不知道你的html结构如何，你能发布你的工作演示吗好的，我把按钮修好了，但是如何“附加”到父div旁边。有办法使用jQuery吗？@MmynameStackflow因为我不知道你的html结构如何，你能发布你的工作演示吗
.parent { position: relative; }
.button { position: absolute; top: 45%; right: -100px; }

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

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