homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

image hiding under Div question.
hide an image under a div

5+ Year Member

Msg#: 4399571 posted 2:03 am on Dec 20, 2011 (gmt 0)

Im trying to hide part of an image under a dive, then use Jquery to slide it out from under the div.

I have two left floated divs lets all them left and right. I have an image in the left div but absolutely positined so it moves 100px into the right div. my problem is its not hiding under the right div like I want it to. I want it hidden under the right div and to slide out into the left. I tried zindex but its not working.

any advice?




WebmasterWorld Senior Member 10+ Year Member

Msg#: 4399571 posted 2:19 am on Dec 20, 2011 (gmt 0)

z-index is the key to working with overlapping elements. And if you want elements to move, you'll need to use absolute positioning for at least one element. Post your code so someone can give you some specific advice.


5+ Year Member

Msg#: 4399571 posted 5:16 am on Dec 20, 2011 (gmt 0)

thanks here is the code:

#left {

border-right-style: none;
padding-left: 10px;
border-left-style: none;
background-repeat: repeat-y;
float: left;
height: 400px;
width: 195px;

#right {
z-index: 2000;
font-size: 11pt;
padding-left: 20px;
background-color: white;
border-left-color: black;
border-left-width: 1px;
border-left-style: solid;
margin-top: -20px;
float: left;
height: 420px;
width: 489px;

float: right;

background:url(images/partner-tab.png) repeat-x scroll 0 0;
display: block;
overflow: hidden;
z-index: 100;
position: absolute;
margin-top: -20px;
height: 70px;
width: 100px;


<div id="left">
<div class="nub">

<img src="images/nub.png" alt="nub" width="18" height="20" />

<div class="cover slice"></div>


<div id="right"></div>


WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4399571 posted 10:03 am on Dec 20, 2011 (gmt 0)

z-index can only be applied to positioned elements, so you might be able to get this to work by simply applying
position:relative to your #right DIV. (Although float AND position kinda feels like a contradiction?!)

5+ Year Member

Msg#: 4399571 posted 7:25 pm on Dec 20, 2011 (gmt 0)

thanks, it worked. I added relative to the right and it works great

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved