Solved

HTML element overlaps other elements

Posted on 2011-09-15
8
516 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:PagodNaUtak
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36547248
It is already overlapping
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36547254
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
 
LVL 3

Expert Comment

by:abhisheksimion
ID: 36547343
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
Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

 

Expert Comment

by:killer_17
ID: 36547963
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 36548231
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
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 36558263
Sorry for the confusion. What I mean is shown below.


overlap.png
0
 

Expert Comment

by:killer_17
ID: 36558531
From your original code, change the childContainer position to fixed to get that overlapping divs.

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36559340
The code I gave you (above) does exactly that. Did you try it?
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question