Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

HTML element overlaps other elements

Posted on 2011-09-15
8
Medium Priority
?
529 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

650 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