HTML element overlaps other elements

Hi,

In my html file below, I have two elements, the main content has a background of red and the child element has a blue background.

Is there a way that the blue element overlaps the red element without changing the overflow:hidden of the main container and the hierarchy of the elements?

Your ideas and inputs is greatly appreciated.

I am open with any css, javascript or jquery solution.

Regards,

Joseph
job-list-IE.htm
LVL 8
PagodNaUtakAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
You could position both elements absolute, and wrap them if you want overall relative positioning. This is just an example of centering the whole lot.

But what are you ultimately trying to achieve? Cause there are many ways to skin a cat (feed a cat?). The overflow:hidden is what's making the parent expand with the child.

(If you don't have access to the CSS/HTML, you make all those style and DOM changes using JS)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Job List Selection</title>

<style type="text/css">

.wrapper{
position:relative;
width:600px;
margin:0 auto;
}

.mainContainer{
position:absolute;
width:600px;
height:400px;
background-color:red;
}

.childContainer{
position:absolute;
background-color:blue;
width:500px;
height:900px;
display:inline-block;
}

</style>

</head>

<body>
<div class="wrapper">
<div class="mainContainer">
<div class="childContainer">

This should overlap the main container.

</div><!-- childContainer -->
</div><!-- mainContainer -->
</div> <!-- wrapper -->
</body>

</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
It is already overlapping
0
 
Gurvinder Pal SinghCommented:
to confirm the same, try this code. ( i have made blue transparent, so that you can see that it is overlapping red)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Job List Selection</title>
<style type="text/css"> 
.mainContainer{
	position:relative;
	width:600px;
	height:400px;
	background-color:red;
	overflow:hidden;
}

.childContainer{
	position:absolute;
	background-color:blue;
	width:500px;
	height:900px;
}
.transparent {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
}
</style>	

</head>
<body >
	<div class="mainContainer">
		<div class="childContainer transparent">
			This should overlap the main container.
		</div>
	</div>
</body>
</html>

Open in new window

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
abhisheksimionCommented:
the
childContainer
is already overlapping
mainContainer

The below image shows that, as i have reduced the size of
childContainer
and aligned it somwhat in between of  
mainContainer

 overlapping
Check out this link yourself
0
 
killer_17Commented:
try the the z-index property. z-index

<style type="text/css"> 
.mainContainer{
	position:relative;
	width:600px;
	height:400px;
	background-color:red;
        z-index : 1;
}

.childContainer{
	position:absolute;
	background-color:blue;
	width:500px;
	height:900px;
	display:inline-block;
        z-index : 2;
}
</style>

Open in new window

0
 
PagodNaUtakAuthor Commented:
Sorry for the confusion. What I mean is shown below.


overlap.png
0
 
killer_17Commented:
From your original code, change the childContainer position to fixed to get that overlapping divs.

0
 
Kyle HamiltonData ScientistCommented:
The code I gave you (above) does exactly that. Did you try it?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.