Geek Answers Handbook

How to place an HTML element on top of another element without affecting the layout of the element (s) below?

Generally speaking, HTML layout is stream based. Each element is positioned after it is in front of it, either to its right or below it. Of course, there are many exceptions that you can get when playing with styles, but even then, if you change the order of something, most things wrap it around and make room for it.

But sometimes I see things that behave very differently, such as pages containing “dialog boxes” that float in the middle of the screen, which are not limited by the size of the divs they are based on, and don’t move other layout elements around them.

I am trying to find a way to do something similar, but not quite the same. I have a table that I use to display the grid (yes, in fact, using the tables correctly), and I would like to place the image on top of one of the grid cells. I cannot put it in a cell because it is larger than the cell, and I do not want to stretch the grid, but I want it to always display in the same position relative to the grid, even if the browser window scrolls or changes.

I believe there must be some way that I can do this. If I put an identifier or class in one of the <TD> cells, how can I create an <Image> that is not part of the <TD> or even <TABLE> to which it belongs, but will always position itself at the top of this <TD> cell <TD> without displacing anything or without affecting its location?

+4
source share
3 answers

To extend both the CJGreen and Napolux offerings, you can still put the image in a table cell, but place it absolutely.

[Edit] Since positioning table cells is allegedly illegal (therefore ignored by Firefox), you can wrap the contents of each <td> in a <div> element (preferably with JS, so you don't need to make bulk changes) and then set to position <div> value:

CSS

 table td > div { position: relative; } table td > div img { position: absolute; z-index: 999; }

JS:

 $(document).ready(function() { $("td").wrapInner('<div />'); });

See here the (updated) fiddle - http://jsfiddle.net/teddyrised/qyu3g/

+1
source

If you use

 table {position:relative;}

then you can use:

 table img { position:absolute; top: #px; left: #px; }

This will cause the image to shift to a specific location inside the table containing the table, and remove it from the rest of the table around it.

+1
source

If I understand correctly, you need to use offset properties along with position:absolute .

The absolute position takes your image out of the stream, the offset can give you the position of the element you want to overlay (TD in your question).

Having an offset (px on the left and top of the page for TD), you can move the image to the desired position.

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

The jQuery documentation explains this very well.

0
source

More articles:


All Articles