I am trying to absolutely position an element inside a table cell.
The TD has position:relative and the element has position:absolute.
This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.
You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/
Does anyone know if I miss some CSS setting that can fix that in Firefox?
the element is not a block element.
add to the style display:block, you will get the needed behavior.
A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.
Example: http://jsfiddle.net/pTJUk/
Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.
It was a very old Firefox bug that have been fixed about 13 years after being reported!
You may refer to the entertaining history here:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Related
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
CSS is still fairly new to me. I have a div element and want to define a button element that would be placed right of the div element. However, I want to do this without modifying any of the styling of the div element. Is this possible? Edit: If yes, please show me an example :)
You can use position:absolute for that element and align it using right/left and top/bottom css rules, this will align the element relative to the entire webpage (or nearest position:relative parent), but what you're looking for is usually done by making both elements float:right/left or display:inline-block. Note that the '/' in my answer indicate your choices, not actual css directives.
Simple add the
float:left
or
float:right
to style it will work fine and display after one and other.
I have an HTML code with an error at some point that I cannot detect. Here is my JSFiddle.
In particular, when I move on "Show more", an absolute positioned div with highest z-index should be shown on top of everything. However, as you may see the first absolute positioned div is shown under other content.
As provided in answers from similar questions, I already set a z-index value and the position type (absolute or relative) for each container of the div.
Any idea to solve this problem?
Thanks to Ghost Answer comment, I solved the problem.
In other answers I read that one should put an increasing z-index value as well a position:relative to all the containers of a div that one would show on hover. Maybe it isn't always true.
Here is what I did:
I removed all the z-index values and unnecessary positioning (I suppose the latter is not meaningful).
I set z-index:auto to the container of the div that I would to show on hover.
Now the code works fine: this is the updated JSFiddle.
try this css
.offer-info-shops span
position:absolute;
z-index:1000;
JSFIDDLE
Interesting problem.
Change the following z-indices: .offer-content, .offer-content-info-shops{z-index:auto}
.detail-modal-window{z-index:1}
http://jsfiddle.net/gteEg/12/
By doing this, all the elements have their z-indices compared against each other.
The issue you had was because since you assigned a z-index to offer-content, and .offer-content-info-shops, you had created a stack context, meaning that child elements of .offer-content-info such as .detail-modal-window had their z-index compared to its siblings in .offer-content-info-shops.
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
In all major browsers: as the question states, a parent <div> container (whose height is not set) over-sizes its height to fit a child <img> element (for instance, a 300-pixel tall image that is the only thing inside the div). The over-sizing is usually about 3 to 5 pixels, and appears at first as img margin-bottom or div padding-bottom might look.
However, using absolute positioning, it is clearly demonstrated that the bottom of the div is below the bottom of the imgby a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here.
Why is this standard practice in web browsers?
Is this meant to compensate for something? It seems unnecessary.
Is this a bug, or a soon-to-be antiquated feature?
EDIT: Thanks to the answerers/commentators below, I know the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.
Notes: This over-sizing can be averted by giving the image child element a CSS property of float:left or float:right, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other float elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. float overlapping only seems allowed in Chrome and Safari using CSS position settings). Thanks!
Add display:block to your image. I think that will fix the problem.
I must be a little bit foggy still on how z-index works because I have this jsFiddle and I can't seem to reorder some elements the way I need to. I want the red box to appear behind the text. Can someone explain how I can do this?
jsFiddle: http://jsfiddle.net/sightofnick/u2pa4/
The z-index is not in pixels, it's just an integer. Rather than z-index:10px, try z-index:10. Note also that this only applies to positioned elements, meaning those elements that have been set to either absolute or relative.
You have to use position:absolute | relative for the nav too
see this http://jsfiddle.net/u2pa4/4/