Display:block
doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute
- as recommended by other posters - should work for you. Position:absolute
will set a position (such as top:0px; left:20px;
) to the browser window overall unless there is a parent with position:relative
set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative
can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed
can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static
is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative
, and set the inner span to position:absolute
. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.