Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts

    Relative element showing up above absolute

    Unfortunately I can't link what I'm going to describe below, as its a company internal item, but I'll provide what HTML/CSS I can.

    I have a header section in which I have a search bar in a div. The div is absolutely positioned within the header section. When the user types in the input, it searches for matches and slides down a box with 5 entries (done via jQuery ajax).

    On one page, the top section of the page is set to relative, so I can absolutely position items within it. However, when I search via the bar, the search results slide below the page's top section.

    All elements have been set to default to a z-index of 0, and I've tried playing with the z-index of all the items with no luck. At the moment, the box that's supposed to drop down as the highest z-index of any defined css, so I'm drawing a blank of why this is happening. When I remove the "position: relative" of the page header, the bar slides where its supposed to, but of course, the children elements within don't display correctly. I really don't want to use a table for layout, but it seems my only option right now.

    Let me know if any other HTML/CSS is necessary. I can also provide the relevant AJAX. There is more CSS and code on the page, but its been removed as unnecessary (or so I believe).

    Code:
    <div id="menu">
    	<a id="logo" href="/site/"><img src="/site/images/logo.jpg"></a>
    	<form id="menuSearchbar" method="get" action="/site/process/cSearch">
    		<input type="text" name="search" class="cSearchbar" autocomplete="off">
    		<div id="menuSearchResults" class="cSearchResults"></div>
    
    		<input type="image" name="submit" value="submit" src="/site/images/search.png">
    	</form>
    </div>

    Code:
    <div id="companyHeader">
    	<div id="companyName">
    	</div>
    	<div id="curInfo">
    	</div>
    	<div id="lastUpdated">
    	</div>
    </div>
    Code:
    #menu {
    	position: relative;
    	height: 53px;
    	background-color: #030;
    }
    
    #menu #menuSearchbar {
    	position: absolute;
    	top: 13px;
    	left: 530px;
    }
    
    #menu #menuSearchbar input[type="text"] {
    	width: 215px;
    	padding: 4px 28px 4px 6px;
    	font-size: 14px;
    }
    
    #menu #menuSearchbar #menuSearchResults {
    	top: 26px;
    	left: 0;
    	z-index: 100;
    	background-color: #FFF;
    	width: 249px;
    	border: 1px solid #000;
    }
    
    #menu #menuSearchbar #menuSearchResults a {
    	display: block;
    	padding: 7px 5px;
    }
    
    #menu #menuSearchbar #menuSearchResults a:hover {
    	background-color: #DDD;
    	text-decoration: none;
    }
    
    #menu #menuSearchbar input[type="image"] {
    	position: absolute;
    	right: 4px;
    	top: 4px;
    	z-index: 100;
    }
    
    
    
    #page_companyProfile #companyHeader {
    	position: relative;
    	height: 110px;
    	background-color: #E7E7E7;
    }
    
    #page_companyProfile #companyHeader > div {
    	position: absolute;
    }
    
    #page_companyProfile #companyName {
    	width: 400px;
    	top: 30px;
    	left: 20px;
    }
    
    #page_companyProfile #curInfo {
    	top: 25px;
    	left: 440px;
    }
    
    #page_companyProfile #lastUpdated {
    	top: 5px;
    	right: 5px;
    	text-align: right;
    	font-size: .85em;
    }
    To make clear, #menuSearchResults slides behind #companyHeader, not its children. When I remove "position: relative;" from #companyHeader, it works.


    Also as a note, it seems this is only happening in firefox, not in Chrome (haven't run tests in all browsers yet).

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Let me know if any other HTML/CSS is necessary.
    Yes, please provide your complete document or better a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Yah, I thought it may not be enough... unfortunately, as mentioned, its an internal item so I can't link it... however, I'll get the code and remove content I can't show and put it somewhere.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's late but here is a fix:

    Chrome is dealing with relative - absolute relations a little bit different than other browsers:

    You should position your relative menu div above other relative divs in the page. Add z-index to #menu style.

    A visual representation:

    #menu(relative)
    | | |
    | | |
    | | |_ div (absolute, z-index: 100)
    | |
    | |_ div(absolute, z-index: 10)
    |
    |
    |
    |__________________#page(relative)

    So, #page element will always stay above all absolute divs that are relative to #menu div, no matter the z-index of absolute divs.

    Let's add a z-index to #menu div so it should stay above #page div


    --------------------------------#menu(relative, z-index: 1)
    |. . . . . . . . . . . . . . . . . . . . . . . . | |
    |. . . . . . . . . . . . . . . . . . . . . . . . | |
    |. . . . . . . . . . . . . . . . . . . . . . . . | |_ div (absolute, z-index: 100)
    |. . . . . . . . . . . . . . . . . . . . . . . . |
    |. . . . . . . . . . . . . . . . . . . . . . . . |_ div(absolute, z-index: 10)
    |
    |
    |
    |__________________#page(relative)
    Last edited by marthypeter; 06-06-2012 at 10:14 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •