html - 固定位置和 float 无法正常工作

Question

我正在尝试在我的站点中创建一个部分，其中是我站点上的一个滚动部分和一个紧挨着它的不移动的部分。这是我的代码:

<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。这是一个无限滚动类型的提要。我还有一个 top_right_wrapper，它应该紧挨着它在右上角。它应该看起来像这样:

------------- ****
------------- ****
------------- ****
-------------
-------------
-------------

滚动条是 --，top_right_wrapper 是 **。当我当前的代码在固定位置执行此操作时:

****--------- 
****--------- 
****--------- 
------------- 
------------- 
------------- 

如果我拿走固定位置，它会在所有数据之后像这样转到页面的最底部。它在正确的位置闪烁然后消失在底部:

-------------
------------- 
------------- 
------------- ****
------------- ****
------------- ****

有人知道怎么解决吗？

Answer 1

问题是您在 div.right_wrapper 上声明了一个 float: right; 和一个 position:fixed;。您描述的布局问题完全有道理。

首先是关于 CSS 绝对位置和固定位置的一些背景信息:

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:

1. The background and borders of the elements that form the stacking context
2. Positioned descendants with negative stack levels
3. Block-level descendants in the normal flow
4. Floated descendants
5. Inline-level descendants in the normal flow
6. Positioned descendants with the stack level set as auto or (zero)
7. Positioned descendants with positive stack levels

The highlighted entries are the elements whose stack level we can change using the z-index property.

(摘自 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>