固定div旁边的父div

我试图让一个div与父div旁边的按钮。像这样：固定div旁边的父div

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

固定div必须在滚动期间固定，但始终在父代旁边并且不在父代之下或之上。

也许有人知道这个问题的解决方案。请告诉我。您正在寻找position: absolute

来源

2013-03-15 MmynameStackflow

你有没有什么你以前尝试？如果是这样 - 你能发布你的代码吗？ – micp 2013-03-15 10:46:14

“固定”意味着它永远不会移动，如果你滚动页面 “绝对”的意思是，它在页面滚动时移动，但添加元素不会妨碍其位置你想要什么？ – madhairsilence 2013-03-15 10:47:54

我想我会为你提供一个解决方案。主要问题是，与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

来源

2013-03-15 11:21:13

，不是固定不变的 - 如果你的父母有类parent和按钮具有类button，你需要的是类似于（假设按钮有100px的这种固定宽度）：

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

这里是一个例子小提琴（增加了一些宽度/高度来证明，这些应该来自你的内容，而不是）http://jsfiddle.net/WpnP4/

编辑：刚刚意识到这个问题是不是100％清楚 - 我以为你想要butto n在特定元素旁边并与屏幕一起滚动。如果您希望按钮元素在屏幕中保持固定，请使用position:fixed。

来源

2013-03-15 10:46:44 hexblot

使用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

来源

2013-03-15 10:48:04 Sowmya

好的，我修复了按钮，但是如何在父div旁边“附加”它。有没有与jQuery的方式？ – MmynameStackflow 2013-03-15 10:55:34

@MmynameStackflow因为我不知道你的HTML结构如何，你可以发布你的工作演示 – Sowmya 2013-03-15 10:56:44

固定div旁边的父div

回答

相关问题