CSS Position Fixed
I would like to have a CSS Style with position property of a div as fixed. This particular div is placed inside another div with some text. But the div with CSS position proverty fixed goes over the top of the text. So the text gets hide under the that div. I need to place the text div and image div aligned to each other. So that the text goes around that image and nothing gets hide under the image.
<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 con开发者_如何学JAVAgue 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>
the thing you can do - play with CSS position with the second div too. and use z-index: 1; or z-index: -1;
Check the property of z-index for css. z-index will help you keep one object above the other. So if 1st div is z-index: 1; and the 2nd is z-index: 2; the 2nd one will float over the 1st one. It requires absolute positioning. for more detals check the in manual.
if you have any other questions - ask me ;)
The only thing you could do to wrap text around an image is to float the image. But this way the image could be only to the left or to the right of the text, not in a position defined by you.
Look here http://jsfiddle.net/e5LQS/
You can make many columns of text, put the image you want in one of the columns, so that the text will wrap around it. But you cannot have an image in the middle of two columns or rows with the text wrapped around it, because that would mean have a position absolute for the image, and the text won't consider it and simply ignore the image.
加载中,请稍侯......
精彩评论