•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 455,970 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,773 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3101 | Replies: 8
 |
•
•
Join Date: Jun 2006
Posts: 27
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
I have two divs which both have backgrounds in my CSS properties.
Unfortunately, div2's background overlaps div1's background. But I want it the other way around. In other words, I want div1's background over div2's. I've tried z-index but it didn't work. How do i solve this?
Unfortunately, div2's background overlaps div1's background. But I want it the other way around. In other words, I want div1's background over div2's. I've tried z-index but it didn't work. How do i solve this?
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
You must render the div you want on top last. This means that the div to be on top must be inside the other div in the HTML file.
HTML is not normally supposed to place objects on top of each other. Objects are normally supposed to have their own places on the page without overlap.
HTML is not normally supposed to place objects on top of each other. Objects are normally supposed to have their own places on the page without overlap.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Posts: 27
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
But I would like only a part of the div to overlap the other div...not the whole thing...
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
What do these divs contain. Depending on the content, there may be other ways to do this.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2004
Posts: 231
Reputation:
Rep Power: 5
Solved Threads: 0
Posting Whiz in Training
z-index property with positioning
divname { position:absolute; z-index:1; }
divname2 { position:absolute; z-index:2; }
probably in a container div
divname { position:absolute; z-index:1; }
divname2 { position:absolute; z-index:2; }
probably in a container div
•
•
Join Date: Jun 2004
Posts: 231
Reputation:
Rep Power: 5
Solved Threads: 0
Posting Whiz in Training
then position with top:xxpx; left:xxpx; or right or bottom, etc.
•
•
Join Date: Jun 2004
Location: Hemet, CA
Posts: 429
Reputation:
Rep Power: 5
Solved Threads: 18
Posting Pro in Training
By default, elements that are formatted later in an HTML document are stacked on top of earlier elements. In addition, elements placed with CSS positioning are stacked on top of elements that are not. To specify a different stacking order, use the style
z-index: value
where value is a positive or negative integer, or the keyword "auto". Objects are stacked based on their z-index values, with the highest z-index values placed on top.
The z-index style only works for elements that are placed with absolute positioning. Also, an element's z-index value determines its position relative only to other elements that share a common parent.
So a container div enveloping the other two divs is required.
I hope that helps...stacking objects can get tricky sometimes.
z-index: value
where value is a positive or negative integer, or the keyword "auto". Objects are stacked based on their z-index values, with the highest z-index values placed on top.
The z-index style only works for elements that are placed with absolute positioning. Also, an element's z-index value determines its position relative only to other elements that share a common parent.
So a container div enveloping the other two divs is required.
I hope that helps...stacking objects can get tricky sometimes.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Display problem Font overlapping (Pascal and Delphi)
- Spacing problems in Ie Gettting extra spacing between divs (HTML and CSS)
- Need help with Random Divs code (PHP)
- Switching visible divs works in IE, not in FF or Opera (JavaScript / DHTML / AJAX)
- I need help with my website. Using Dreamweaver. (JavaScript / DHTML / AJAX)
- Error with tables overlapping (PHP)
- web design: tables versus divs (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: empty space divs in IE
- Next Thread: How to switch layouts without affecting content
