All geek questions in one place

CSS position fixed

I would like to have a CSS style with the position of the div property as fixed. This separate div is placed inside another div with some text. But a div with a fixed CSS position is fixed at the top of the text. Thus, the text is hidden under this div. I need to put div div and images in line with each other. So the text bypasses this image, and nothing hides the image under it.

<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>
+4
source share
2 answers

the thing you can do is play with the CSS position with the second div. and use z-index: 1; or z-index: -1;

Check the z-index property for css. z-index helps you keep one object over another. So, if the 1st div is z-index: 1; and the second is the z-index: 2; the second will float above the 1st. This requires absolute positioning. For more detailed checks, refer to the manual.

if you have other questions - ask me;)

0
source

The only thing you could do to wrap text around an image is to float the image. But in this way, the image can only be to the left or right of the text, and not in the position you define.

Take a look here http://jsfiddle.net/e5LQS/

You can make many columns of text, put the desired image in one of the columns so that the text wraps around it. But you cannot have an image in the middle of two columns or rows with text wrapped around it, because that would mean an absolute position for the image, and the text would not view it and just ignore the image.

0
source

Source: https://habr.com/ru/post/1343597/

More articles:


All Articles