I have the following HTML structure:
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="choice-select">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
"expandable" divs are repeated.
"custom-select" divs become visible
on click.
"choice-select" is at the bottom of all expandable divs and
contains another select dropdown with a button
with the following styles:
.expandable {
position: relative;
z-index: 10;
}
.custom-select {
position: absolute;
z-index: 9999;
}
My problem is this:
The "custom-select" is used everywhere and has a very high z-index of 9999. Even if multiple of these are used in the same div, the clicked (expanded) one is still visible over the rest of the divs and selects as its in the same parent div.
I gave "expandable" div a z-index of 10 so that when the "custom-select" is clicked and it overlaps "choice-select", it is still visible and clickable.
However, since the "expandable" divs all have the same z-index and there can be N number of "expandable" divs, a "custom-select" when clicked and if it happens to expand into the sibling "expandable" div gets cut. Its hidden behind the content of the next "expandable" div.
What do I need to do to ensure that the "custom-select" is always visible? I also tried by giving "expandable" div an opacity of 0.99, but it didn't work. Any tips?
Somewhat indicative code: https://codepen.io/imgr8/pen/bzOrbY
I am going to answer my own question. I just added the z-index on the sibling parent only during hover. That solved it. Thank you for all your help!
Related
I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I've got a layout with a left sidebar to the content. Sidebar is absolutely positioned, width 200px, and content has a margin-left of 200px. That's all dandy, but I just began animating the navigation, I would like it to slide in from underneath the content. See fiddle.
Problem is, the absolutely positioned sidebar is above the content, regardless of setting the z-indexes to 1 and 2, respectively.
Setting the sidebar's z-index to -1 has it slide in correctly, but places it underneath it's parent, making navigation unclickable.
fiddle
<div class="parent">
<aside class="animated fadeInRight">
... navigation ...
</aside>
<main>
... content ...
</main>
</div>
How do I have the sidebar slide in from underneath the content, but above the parent?
Aha! I've figured it out.
As per w3schools...
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
So simply adding position: relative to the <main> fixes it.
Updated fiddle
If you add position: relative; to your main box, the z-index css will be applied. The way you currently have it, the z-index is not working because it needs to have a position style added to it.
I am working on a website that has been created with a shop CMS. On the start page there are two div boxes on the same level that appear in the following order:
DIV-box "container" -> contains the image of a gold bar
DIV-box "custom_text" -> contains text
Here comes a screenshot: http://de.tinypic.com/view.php?pic=11ratd5&s=5#.Utm1FhCIXrc
My goal: Having the text appear next to the gold bar by putting the "custom_text" box onto the image "container" box. How can I achieve that with CSS?
Just use this:
<div id="div1">
<div id="div2">
<p>2 divs</p>
</div>
</div>
You can put one div into another!
You can edit the width of the containing div and posting text to the side with another div.
I've solved it: I put the .imagemap inside the .container-div "absolute !important"...
Imagine the HTML was like this:
HTML
<div class="outer-box">
<div class="inner-box">Box 1</div>
<div class="inner-box">Box 2</div>
</div>
You can put two inner <div>s over each other by setting position: absolute;. An if you want to keep them in current position instead of sticking to top or other places, you should wrap it with an outer box and set position: relative; for the wrapper.
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
}
If you don't do position: relative; for outer box, the default position of inner boxes (top:0; left:0;) will become actual position of their closest parent with relative on the page or just <body>.
I'm trying to display a div over a image. When user enters the image the division must display, means on hover effect. But what happens is when I hover the mouse over main division the div displayed under the image.
My code is :
<div class="bgimg">
<img width="100%" height="100%" data-id="1" src="data:image/jpeg;">
<div id="changeBackPicture" style="display: none;">
<a id="ChangeBAKPicture" href="javascript:void(0)">Change BackGround Picture</a>
</div> <-- This division need to display above the image --->
<div class="primg"></div>
<div id="uname">xyz </div>
</div>
css code :
#changeBackPicture
{
float:right;
margin-top:-70px;
margin-right:500px;
width:270px;
height:35px;
margin-left:-3px;
margin-right:-3px;
}
Below picture shows how the division now displaying. I need to display the division over the image...
Please anyone tell me how to do this stuff........ Thanks. ...
z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.
In order for the element to use z-index, it must have be positioned absolute, relative, or fixed.
#changeBackPicture { position: relative; z-index: 9999;}
resource: http://www.w3schools.com/cssref/pr_pos_z-index.asp
It really isn't all that complicated, you should have a look at the Z Index CSS Property as that does exactly what you require.
Make sure you set the Z index for both the image you are trying to cover and the div you are covering it with!
have you tried adding a z-index to your overlay div?
give it a z-index of 50 and see if that works.
You can also give it absolute positioning and just place it ontop of the image div.
If I have this:
<div id='parent'>
<p>Parent stuff here</p>
<div id='child'>Child stuff here</div>
</div>
Is there a way to make the parent div appear overtop of the child div without using position:absolute? Basically, you wouldn't see the child div at all. z-index doesn't seem to work. I want to do this with a transparent PNG so that I can highlight certain divs on mouseover - the transparentness will allow the under stuff to still be seen a little.
Thanks!
z-index will only work if a position other than static (the default) is set on that element. Add position: relative; to the relevant element and z-index will work. Here is an example: http://jsfiddle.net/sl1dr/8gR6V/