Element w/ relative position appearing on top of Absolute/Fixed element

9,735 Expert Mod 8TB

Hi!

I'm attempting to display a <div> element on top of my page's content so that the user cannot interact with it while being prompted to answer a question. I have set this <div> to have a position:fixed style (have also tried position:absolute as well).

On my page I have a button with a style of "top:50%; position:relative;" and this button is appearing on top of the <div> element that is supposed to be preventing user interaction. I have attempted to set the z-index of the button so that it is much lower than the <div> but this did not fix the problem. The only way to fix it so far is to remove the position:relative style but this can prove to be a styling problem.

Is there any way to make the <div> cover elements with a position:relative style?

Thanks for your time,

-Frinny

May 26 '09 #1

Subscribe Post Reply

4378

Ciary

247

Expert 100+

have you tried making the position of the div relative?

May 26 '09 #2

Frinavale

9,735

Expert Mod 8TB

Hah No.
Let me try that now....

It doesn't work, sorry.
The position:relative style doesn't make the <div> appear on top of the page content....it still displays it within the flow of the page content...which is not what I'm looking for.

May 26 '09 #3

drhowarddrfine

7,435

Expert 4TB

Try this or something like it. It's sloppy and I did not test it.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

body{height:100%;background-color:blue}

#top{position:absolute;top:0;height:100%;width:100%;background-color:yellow}

button{position:relative;top:50%;left:50%}

#bottom{background-color:green}

</style>

</head>

<body>

<div id="bottom"><input type="button" value="button" name="button">

<div id="top">

    <button>here</button>

</div>

</div>

</body>
 
</html>

May 26 '09 #4

Frinavale

9,735

Expert Mod 8TB

Oh, I see Doc.

It has to do with where the HTML appears in the page.

Doc's solution has the <div> that's displayed on top under the content that it is being displayed on top of...and it works:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

  body{

      height:100%;

      background-color:blue;

  }

  #top{ 

      position:absolute;

      top:0;

      height:100%;

      width:100%;

      background-color:yellow;

  }

  .button{

      position:relative;

      top:50%;

      left:50%

  }

#bottom{background-color:green}

</style>

</head>

<body>

<div id="bottom">

  <input type="button" value="button" class="button">

  <div id="top">

    <span>some text</span>

  </div>

</div>

</body>

But, if I move the <div> above the content that it's being displayed on top of it doesn't work and the button show's through:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

  body{

      height:100%;

      background-color:blue;

  }

  #top{ 

      position:absolute;

      top:0;

      height:100%;

      width:100%;

      background-color:yellow;

  }

  .button{

      position:relative;

      top:50%;

      left:50%

  }

#bottom{background-color:green}

</style>

</head>

<body>

<div id="bottom">

  <div id="top">

    <span>some text</span>

  </div>

  <input type="button" value="button" class="button">
 
</div>

</body>
 
</html>

Thank you for the solution Doc, I would never have thought of that on my own!

Now I have no idea how I'm going to enforce solution in my application (since the control can be placed anywhere on the page) but at least I know know how to fix it.

Thanks again,

-Frinny

May 26 '09 #5

Frinavale

9,735

Expert Mod 8TB

Apparently history repeats itself because I found myself in the same situation again all these years later!

Anyways, the solution here isn't 100% correct!
According to this article IE Z-Index Bug

Basically the fact that the yellow box is wrapped in a relative positioned element should not effect the stacking order [of the green box whose absolutely positioned]: the CSS specification clearly states that only positioned elements that have a computed z-index value other than 'auto' generate a new stacking context. The relative positioned element does not have a z-index value defined, so it should not influence the stacking order of it's child-elements.

So, the problem is actually with IE's implementation of stack contexts.

The solution that we came up with in this thread all those years ago couldn't help me with the particular page layout that I am working with today.

What I had to do was find the 2 parent elements with a position set (these are creating the 2 separate stacking contexts) and set z-index on them.

For example if a button is nested in a container called #content and a drop down menu <div> is in #header...setting the #content { z-index: 1 } and #header { z-index: 2 }... Provided #header and #content are in the same stacking context, this will fix the problem.

Please note that the problem has been fixed in later versions of Internet Explorer (I am not experiencing it in version 10 but I was working on backwards compatibility and this really drove me crazy for a while)

-Frinny

Oct 29 '13 #6

Similar topics

Position relative to parent element

by: Markus Ernst | last post by:

Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...

HTML / CSS

Dynamic width of absolute positioned element

by: mike eli | last post by:

Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...

Javascript

Placing child element relative to parent with div

by: Rob T. | last post by:

Given the following in a stylesheet: #parent { width: 50px; height: 50px; } #child {

HTML / CSS

Position something relative to an inline element?

by: axlq | last post by:

I've spent most of the day struggling with what I thought would be a trivial problem. I have a hidden element that appears, outside of the normal flow, when the mouse hovers over an inline...

HTML / CSS

position:absolute in a relative container bug

by: derelicten | last post by:

hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of...

HTML / CSS

how can I put an element below another element, that's not absolutely positioned?

by: felipevaldez | last post by:

how can I put an element below another element, that's not absolutely positioned? so I have a n element, called X, and next to that, an element Y X Y XXXXXX

Javascript

How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )

by: john | last post by:

Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...

HTML / CSS

Element offsetLeft producing a wrong value in IE6

by: montybytes | last post by:

Hi there, Although, I have already placed this question in the HTML/CSS section, perhaps it might be worthwhile asking the question here as well. I have a JavaScript function which retrieves...

Javascript

Absolute positioned HTML elements not printing

by: chemlight | last post by:

I am having an issue with HTML elements not printing when positioned absolutely when they extend beyond the first page. I am working on some foreign tax refund forms. The forms are cut into multiple...

HTML / CSS

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp