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.
Related
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!
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 have this http://jsbin.com/AKUtEYu/1/edit.
Here, I want to show an image inside the div1 and below this div1, i also want to show a submit button inside the div2. The problem I have here is that the second div appears underneath of the first div.
P.S 1: I need to use position:absolute in the first div. I know if i remove it, the problem seems to be fixed, but i am looking for a way with it.
P.S 2: I used solid borders to see what is going on.
As stated slightly ahead of me, move your submit button inside the #container parent block:
<div id="container">
<img src="http://31.media.tumblr.com/tumblr_m50exyThDb1r4kc3co1_500.jpg" />
<div id="footerSubmit">
<input type="submit" alt="Submit" id="SubmitSelections" name="Submit">
</div>
</div>
Otherwise, you will have to set a height on #container and absolute or relative position on the #footerSubmit, which is a lot more work...
What if you put the second div inside the first? After all, the divs are just containers - the important thing is for the button to be placed under the picture.
If you know height of your absolutde element/div then you can use it's height to position your relative element. for example change your div2 css as
#footerSubmit{
position:relative;
top:350px;
float:right;
border: 10px solid;
color:red;
}
Otherwise put your div2 inside div1 and position it as bottom:0; and float:right;
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
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/