Solved

HTML element overlaps other elements

Posted on 2011-09-15
8
506 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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
disable and enable textboxes in dataTable 7 24
Html date format 9 20
CSS for Popup in ASP.NET 4 12
Javascript: Mouseup doesn't follow mousedown 13 23
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

735 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