位置固定的元素答案

【问题标题】：Element with fixed position位置固定的元素
【发布时间】：2013-04-08 09:56:47
【问题描述】：

我需要将元素的位置设置为固定，因为我想将其用作可滚动 div 中的标题。我还需要在 top:0 和 right:0 指定元素位置

如果我将这些属性一起使用，它将不起作用。我该如何解决这个问题；

 position:absolute;
 top:0;
 right:0;

有效，但我需要固定位置..

如果我使用位置固定，则 div 是整个文档的位置，而不是在我附加它的 div 内...

小提琴：http://jsfiddle.net/TP2cp/

【问题讨论】：

使用position: fixed...
可能重复stackoverflow.com/questions/10243991/…

标签： css position

【解决方案1】：

使用position:fixed。

例子：

HTML

<div class="main">
    <div id="header"><p>Header</p></div>
</div>

CSS

.main{
    width:100%;
    height:2000px;
}

#header{
    width:100%;
    height:100px;
    position:fixed;
    top:0;left:0;
    background:yellow;
}

JSFiddle.

更新

width:inherit; 的解决方案：

JSFiddle#2.

【讨论】：

这可行，但我的标题显示在整个文档上，而不是在我附加它的 div 内。
@Jacob 您可以尝试将 fixed div 放在 parent div 之外。 exampe.
你能在 wuestion 中检查我的例子，它有我想要的所有正确的 css
是的，除了一件事.. 父级的宽度是动态的。如果我将宽度设置为 100%，它会将我的 div 扩展到整个页面。
@Jacob 你可以用纯 CSS 做到这一点，因为 position:fixed; 将元素置于其流动之外，但使用 JS 你可以。解决方案JQuery。

【解决方案2】：

谁说不能一起使用这些属性？

position:fixed;
top:0;
right:0;

在这个例子中自己尝试一下 jsFiddle here。

HTML：

<div id="theDiv">Example Div</div>

CSS：

#theDiv { position:fixed; top:0px; right:250px; }

回复 OP 的编辑：

您不能在这样的容器 div 中使用固定定位的 div，因为将其设为固定 div 会将其排除在流程之外。如果您打算将其固定在另一个 div 中，则应在容器 div 中使用 position:absolute 和 position:relative。

看看我的新 jsFiddle here。

HTML：

<div id="container">
    Container Div
    <div id="fixed">Child Div</div>
</div>

CSS：

#container {
    width: 400px;
    position:relative;
}

#fixed {
   position:absolute;
   top:0px;
   right:0px;
}

【讨论】：

【解决方案3】：

为什么不：

position:fixed;
top:0;
right:0;

【讨论】：

【解决方案4】：

问题是你是如何定位可滚动的 div 的？如果我明白你想要什么我认为你只需要将标题放在可滚动的 div 之外

【讨论】：