我正在尝试在我的网站中创建一个部分，其中是我网站上的滚动部分，旁边的部分不会移动。这是我的代码：
<div class="wrapper">
<div id="feed">
</div>
<div class="right_wrapper">
<div class = "top_right_wrapper";>
<div class = "top_right_title_wrapper">
<div class="top_right_title">
Title
</div>
</div>
</div>
<div class = "mid_right_wrapper";>
</div>
</div>
的CSS：
div.wrapper{
width: 1110px;
margin: auto;
}
div.right_wrapper{
height: 100%;
width: 300px;
float:right;
position:fixed;
}
div.top_right_wrapper{
height: 150px;
width: 300px;
background-color: white;
box-shadow: 0px 1px 2px #888888;
float:right;
}
div.mid_right_wrapper{
height: 300px;
width: 300px;
margin-top: 3px;
background-color: white;
box-shadow: 0px 1px 2px #888888;
float:right;
}
div.top_right_title_wrapper{
height: 40px;
width: 150px;
padding:0;
}
div.top_right_title{
font-family: "Open Sans";
font-weight: bold;
padding: 8px;
color: #2F4F4F;
}
我有一个id feed，它从ajax调用获得不同的div。它是一种无限滚动类型的Feed。我还有一个top_right_wrapper，它应该就在右上角。它应该是这样的：
------------- ****
------------- ****
------------- ****
-------------
-------------
-------------
滚动条为--，top_right_wrapper为**。当我的当前代码使用固定位置执行此操作时：
****---------
****---------
****---------
-------------
-------------
-------------
如果我拿走固定位置，它会在所有数据之后像这样进入页面的最底部。它在正确的位置闪烁，然后消失在底部：
-------------
-------------
-------------
------------- ****
------------- ****
------------- ****
任何人都知道如何解决这个问题？
答案 0 :(得分：1)
问题是您在float: right;上宣布position:fixed;和div.right_wrapper。您描述的布局问题完全合理。
首先介绍CSS绝对和固定位置的背景信息：
事实上，在一个堆叠环境中可以有不少于七个图层，并且这些图层中的任意数量的元素都可以，但不要担心 - 您不太可能在堆叠环境中处理七个图层。从一个堆叠上下文中呈现元素（所有元素，不仅是定位的元素）的顺序如下：
- 构成堆叠上下文的元素的背景和边框
- 排名水平为负的定位后代
- 正常流程中的块级后代
- 浮动的后代
- 正常流程中的内联级后代
- 定位后代的堆叠级别设置为自动或（零）
- 排名水平为正的定位后代
突出显示的条目是我们可以使用z-index属性更改其堆栈级别的元素。
（摘自http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning）
您遇到这些问题的原因是您要为对象分配固定位置。这使它脱离了正常的对象流。当你删除固定位置时，这只留下float: right声明，它将它放在主列的右边。
而不是float: right，使用right: 0;等声明来定位项目。
为了帮助说明我正在谈论的内容，下面是一个例子。
#wrapper {
position: relative;
width: 90% margin: 1em auto;
/* Background color to help illustrate areas*/
background-color: red;
}
#content {
position: relative;
width: 70%;
padding: 1em;
background-color: white;
}
#menu {
position: fixed;
padding: 10px;
top: 30px;
left: calc(70% + 30px);
background-color: white;
}<div id="wrapper">
<div id="content">
<h1><span class="mw-headline" id="The_third_dimension.E2.80.94z-index">The third dimension—z-index</span></h1>
<p>It’s natural to regard a web page as two-dimensional. Technology hasn’t evolved far enough that 3D displays are commonplace, so we have to be content with width and height and fake 3D effects. But CSS rendering actually happens in three dimensions!
That doesn’t mean you can make an element hover in front of the monitor—yet—but you can do some other useful things with positioned elements.
</p>
<p>The two main axes in a web page are the horizontal X axis and the vertical Y axis. The origin of this co-ordinate system is in the upper left-hand corner of the viewport, ie where both the X and Y values are 0. But there is also a Z axis, which we
can imagine as running perpendicular to the monitor’s surface (or to the paper, when printing). Higher Z values indicate a position “in front of” lower Z values. Z values can also be negative, which indicate a position “behind” some point of reference
(I’ll explain this point of reference in a minute).
</p>
<p>Before we continue, I should warn you that this is one of the most complicated topics within CSS, so don’t get disheartened if you don't understand it on your first read.
</p>
<p>Positioned elements (including relatively positioned elements) are rendered within something known as a stacking context. Elements within a stacking context have the same point of reference along the Z axis. I’ll explain more about this below. You
can change the Z position (also called the stack level) of a positioned element using the <code>z-index</code> property. The value can be an integer number (which may be negative) or one of the keywords <code>auto</code> or <code>inherit</code>. The
default value is <code>auto</code>, which means the element has the same stack level as its parent.
</p>
<p>You should note that you can only specify an <i>index</i> position along the Z axis. You can’t make one element appear 19 pixels behind or 5 centimetres in front of another. Think of it like a deck of cards: you can stack the cards and decide that the
ace of spades should be on top of the three of diamonds—each card has its stack level, or Z index.
</p>
<p>If you specify the <code>z-index</code> as a positive integer, you assign it a stack level “in front of” other elements within the same stacking context that have a lower stack level. A <code>z-index</code> of 0 (zero) means the same as <code>auto</code>,
but there is a difference to which I will come back in a minute. A negative integer value for <code>z-index</code> assigns a stack level “behind” the parent’s stack level.
</p>
<p>When two elements in the same stacking context have the same stack level, the one that occurs later in the source code will appear on top of its preceding siblings.
</p>
<p>There can in fact be no less than seven layers in one stacking context, and any number of elements in those layers, but don't worry—you are unlikely to have to deal with seven layers in a stacking context. The order in which the elements (all elements,
not only the positioned ones) within one stacking context are rendered, from back to front is as follows:
</p>
<ol>
<li>The background and borders of the elements that form the stacking context
</li>
<li> <b>Positioned descendants with negative stack levels</b>
</li>
<li>Block-level descendants in the normal flow
</li>
<li>Floated descendants
</li>
<li>Inline-level descendants in the normal flow
</li>
<li> <b>Positioned descendants with the stack level set as <code>auto</code> or (zero)</b>
</li>
<li> <b>Positioned descendants with positive stack levels</b>
</li>
</ol>
<p>The highlighted entries are the elements whose stack level we can change using the <code>z-index</code> property.
</p>
</div>
<div id="menu">
<h3>This is a fixed menu.</h3>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
</div>
</div>
答案 1 :(得分：0)
您已使用position:fixed调用了div而未指定任何锚点，因此它会锚定到top:0，left:0。如果您想将元素修复为左上角0,0以外的其他元素，则需要在top left bottom right中指定它们。
my-class{
position: fixed;
right: 10px;
top: 10px;
}