How to Fix Randomly Disappearing Absolutely-Positioned Elements in IE

Share this article

IE6 and IE7 disappearing elements
After 8 years, you’d have thought all IE6’s bugs would be well-documented and understood. Actually, after that time, you’d have hoped most of the issues would have been fixed in IE7 or IE8! I was recently contacted by a frustrated developer who’d experienced disappearing absolutely-positioned elements in IE. The bug is quite bizarre, it’s not often you experience it, and there’s little information about it on the web. Hopefully, this article will go some way to rectifying that situation.

The Problem

Consider this layout: layout The HTML elements are coded in the order specified, i.e. content blocks 1 and 2, header 3, right-hand block 4, and footer 5. The outer container is set to position: relative and all items have widths assigned so IE hasLayout. It may not be the most efficient layout but it’s valid and works in all browsers. Except IE6, IE7, and possibly IE8 … sometimes. The first time you visit the page, IE can refuse to show the header. However, the header may re-appear when visiting a similarly-coded page on the same site. It can also re-appear when you return to the first page? The problem is caused by an IE bug that hides an absolutely-positioned element when it’s coded immediately before or after a floated element (it’s next to a floated sibling). Unfortunately, this condition does not necessarily trigger the bug — it’s time dependent! The timing of the file downloads and the rendering speed affect whether it occurs or not. In my experience, the bug seemed less likely to occur if some files were cached. So, here’s an example page
. Unfortunately, the bug is so inconsistent that it’s impossible to create one that’s guaranteed to work (or fail?) On my local PC’s server, the header disappears in IE6, 7 and 8. On the SitePoint server, it only disappears in IE6 and 7. You may have a different experience. In addition, fake IEs such as IETester do not necessarily exhibit the same problem. I’d recommend using a real version of IE such as one within a VM (see Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode or How to Run IE6, IE7 and IE8 on Windows 7 HOME
).

The Solution

Fortunately, there is a quick and dirty solution: simply place an empty un-positioned static <div></div> immediately before and/or after the absolutely-positioned element. In the fixed example, an empty <div></div> after the header prevents the problem occurring. Semantic HTML devotees will be horrified but I’m afraid there doesn’t appear to be a CSS-only fix … unless anyone knows otherwise? A better solution would be a more efficient layout without the absolutely-positioned header. Unfortunately, that can require a significant amount of code re-factoring if you haven’t tested IE early and often. Have you experienced this strange bug before? Or have you given up on IE altogether?

Frequently Asked Questions (FAQs) about CSS Positioning

What is the difference between absolute and relative positioning in CSS?

In CSS, the position property is used to specify the type of positioning method for an element. There are five different position values: static, relative, fixed, absolute, and sticky.

Absolute positioning allows an element to be positioned relative to the nearest positioned ancestor. This means that the element is taken out of the normal flow of the document and no space is created for the element in the page layout. It’s positioned according to the top, bottom, left, and right properties.

Relative positioning, on the other hand, positions an element relative to its normal position. This means that the element still occupies its space in the document flow, unlike absolute positioning. The top, bottom, left, and right properties are used to move the element relative to where it would normally have been.

Why does my element disappear when I use absolute positioning?

When you use absolute positioning, the element is taken out of the normal document flow. This means that it doesn’t take up any space in the layout. If there’s no positioned ancestor element, the element will be positioned relative to the document body. This can cause the element to disappear if it’s positioned outside the viewport. To fix this, you can use a parent element with relative positioning. This will make the absolute positioned element relative to the parent, not the entire page.

How can I prevent my absolute positioned element from disappearing in Internet Explorer?

Internet Explorer has some quirks when it comes to CSS positioning. One common issue is that an absolute positioned element can disappear if its parent element has a layout but no dimensions set. To fix this, you can set a height or width on the parent element. Alternatively, you can use the CSS zoom property, which triggers hasLayout in Internet Explorer.

What is the CSS zoom property and how does it affect positioning?

The CSS zoom property is a non-standard property that’s used to scale an element. It’s not part of the official CSS specification and is mainly used as a workaround for layout issues in Internet Explorer. When you apply the zoom property to an element, it triggers hasLayout in Internet Explorer. This can help fix issues with disappearing absolute positioned elements.

How does the CSS position property interact with other CSS properties?

The CSS position property interacts with several other CSS properties. For example, the top, bottom, left, and right properties are used in conjunction with the position property to determine the final position of an element. The z-index property is also related, as it determines the stacking order of positioned elements. If two positioned elements overlap, the one with the higher z-index will be displayed on top.

What is the difference between fixed and sticky positioning?

Fixed positioning is a type of absolute positioning that positions an element relative to the browser window, instead of a positioned ancestor. This means that the element will stay in the same place even if the page is scrolled.

Sticky positioning is a hybrid of relative and fixed positioning. An element with sticky positioning is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

How can I center an absolute positioned element?

To center an absolute positioned element, you can use the top, right, bottom, and left properties in conjunction with the margin auto trick. Set the top, right, bottom, and left properties to 0, and the margin to auto. This will center the element both vertically and horizontally.

Why is my absolute positioned element not positioned relative to its parent?

An absolute positioned element is positioned relative to its nearest positioned ancestor. If there’s no positioned ancestor, it will be positioned relative to the document body. To make the element positioned relative to its parent, you need to set a position value other than static on the parent element.

Can I use absolute positioning to create a layout?

While it’s technically possible to use absolute positioning to create a layout, it’s generally not recommended. Absolute positioning takes elements out of the normal document flow, which can lead to unexpected results and make the layout harder to maintain. It’s usually better to use other CSS properties, like display and flexbox, to create a layout.

What is the use of the CSS position static property?

The CSS position static property is the default value for the position property. It means that the element is positioned according to the normal document flow. The top, right, bottom, left, and z-index properties have no effect on statically positioned elements.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSS
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week