logo标签列表

CSS固定定位

htmlcss
4

我希望有一个CSS样式，其中一个div的position属性是fixed。这个特定的div位于另一个包含一些文本的div中。但是，具有CSS position属性fixed的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>
1
你想让文本在用户滚动时自动换行吗？不可能实现。 - Marcel
4
你误解了 position:fixed 的意思。这意味着 div 元素的位置在视口中是固定的，不受滚动位置的影响。因此，它将始终与某些内容重叠。position:fixed 还会从流中移除该元素，使其父元素不再考虑固定的 div，并围绕其移动内容。也许你想使用 float 代替？ - Bazzz
我想让一个div固定在一个位置，同时其父div的内容必须围绕第二个div对齐。 - Krishna
要么浮动图像，要么绘制你想要的图片。 - easwee
2个回答
0

唯一能够让文字环绕图片的方法是将图片浮动。但这种方式只能让图片在文本的左侧或右侧，而不能按照您定义的位置放置。

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

您可以创建多列文本，在其中一列中放置所需的图片，以便文本会围绕其周围环绕。但您无法在两列之间或行中间放置一张图片并使文本环绕它，因为这意味着图片具有绝对位置，而文本不会考虑它并忽略该图片。

0

你可以做的事情是 - 也可以玩一下第二个div的CSS定位。可以使用z-index: 1;或z-index: -1;

查看CSS的z-index属性。z-index能够帮助你将一个对象置于另一个对象之上。因此，如果第一个div是z-index: 1;而第二个div是z-index: 2;，那么第二个div将浮在第一个div之上。这需要使用绝对定位。有关更多详细信息，请参考手册。

如果你有任何其他问题，请随时问我；)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接