CSS 位置固定答案

【问题标题】：CSS Position FixedCSS 位置固定
【发布时间】：2011-03-14 07:50:51
【问题描述】：

我想要一个固定的 div 位置属性的 CSS 样式。这个特定的 div 被放置在另一个带有一些文本的 div 中。但是CSS位置proverty固定的div超出了文本的顶部。因此文本隐藏在该 div 下。我需要将文本 div 和图像 div 彼此对齐。这样文字就围绕着该图像，并且没有任何东西隐藏在图像下方。

<html>
<head>
<style type="text/css">
    .newspaper
    {
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      column-count:3;
      -webkit-column-width:100px;
      column-width:100px;
    }
  </style>
  </head>
<body>

  <p><b>Note:</b> Internet Explorer and Opera do not support the column-count property.</p>
  <div class="newspaper" >
    <div class="changeFont" style='font-size:18px;'>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
    </div>

  <div style="float: right; position:fixed; left:170px;top:80px;display:inline-table;">
    <img id="imageTable" width="280" height="80" src="http://www.google.co.in/logos/2011/alamara11-hp.jpg"/>
  </div>

    <div class="changeFont" style='font-size:18px;'>
      ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
      eu feugiat nulla facilisis at 9999999999999999
      111111111111111 vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
      duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
      mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
      Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
    </div>


</body>
</html>

【问题讨论】：

您希望文本在用户滚动时重新换行？不会发生的。
您误解了position:fixed 的含义。这意味着div 的位置在视口中是固定的，与滚动位置无关。所以它会以一种或另一种方式总是重叠一些东西。 position:fixed 也会从其父级中移除 div 在流方面，父级将不再考虑固定的 div 并在其周围移动内容。也许您正在改用float？
我希望将一个 div 固定在某个位置，并且其父 div 的内容必须围绕第二个 div 对齐。
浮动图像或绘制您想要的图片。

标签： html css

【解决方案1】：

您可以做的事情 - 也可以使用第二个 div 的 CSS 位置。并使用 z-index: 1;或 z-index: -1;

检查 css 的 z-index 属性。 z-index 将帮助您将一个对象保持在另一个对象之上。所以如果第一个 div 是 z-index: 1;第二个是z-index：2；第二个将漂浮在第一个之上。它需要绝对定位。有关更多详细信息，请查看手册。

如果您有任何其他问题 - 问我 ;)

【讨论】：

【解决方案2】：

在图像周围环绕文本的唯一方法就是使图像浮动。但是这样图像可能只在文本的左边或右边，而不是在你定义的位置。

看这里http://jsfiddle.net/e5LQS/

您可以制作多列文本，将您想要的图像放在其中一列中，以便文本环绕它。但是您不能在两列或两行的中间放置一个图像，并在其周围环绕文本，因为这意味着该图像具有绝对位置，并且文本不会考虑它并简单地忽略该图像。

【讨论】：