?
Solved

HTML element overlaps other elements

Posted on 2011-09-15
8
Medium Priority
?
519 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:Gurvinder Pal Singh
ID: 36547248
It is already overlapping
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

 

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 2000 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

752 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