I have a strange issue with the z-index of an element not getting set even when I put a position:absolute on it. The parent element has overflow:hidden set.
TO see an example of what I mean:
Go to http://www.berrisforda.com/
On the job search tab there is a custom select/dropdown hover over it
Notice that it get cut off by the container, it actually extends below it but the container has overflow:hidden set
I am trying to set a z-index on it but haven't had any luck
Can anyone help please?
In this case, z-index won't help you. If you have overflow:hidden on a parent element, any child outside of that element's bounding box will be hidden. You have three options:
Move the drop down element so that it is no longer a child of the overflow:hidden element.
Make the drop down list scroll.
Remove the overflow:hidden style.
Adjust the hieght on your .tab to be shorter...
ul#output li.tab {
position: absolute;
width: 684px;
height: 345px; /*see how I changed this value*/
background-color: #fff;
}
And remove overflow:hidden from #feature-list{}
And set the z-index:1 on .dropdown dd ul {}
Do the following step too to fix you footer....
Sorry Burt - I made a mistake initially - here is the final step
Remove position:relative and z-index from #footer
Then you should be good to go!
Related
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
In Wordpress, I'm trying to style the dropdown menu used in .primary-menu. Unfortunately, things don't really go as planned.
I copied the HTML from the inspector in Chrome and removed the clutter such as href's and id's and tried to debug it in jsFiddle: https://jsfiddle.net/1cL8fq8b/1/
When hovering over the last item in the results tab, .sub-item seems to take the width of it's parent. I gave .sub-menu an absolute position to make it independent. Still I can't get .sub-item to have it's own width.
Here's a screenshot for a better view.
How can I make the sub-item to have it's own width, and not rely on it's parent's width?
You can add a negative margin-left style to extend your drop down menu to the left.
.sub-menu {
position: absolute;
right: 0;
display: none;
margin-left:-100px;
}
See this: https://jsfiddle.net/jokbd6L5/
Or define a custom width for your drop down:
.sub-menu {
position: absolute;
right: 0;
display: none;
width:100px;
}
See this: https://jsfiddle.net/hjoctv5x/
Since its position is absolute I don't think there is a way in CSS to make it expand according to the width of its content (variable width). But you can write some javascript to calculate the max content width for each dropdown menu and set the dropdown menu width accordingly.
It's because on hover its display is set to block. Set it to inline-block instead
First and foremost.. read this http://learnlayout.com/position.html
absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
So basically absolute positioning only takes it out of the document flow
also.. this piece of code..
&:hover .sub-menu
is only targeting the submenu. Try targeting the li of the submenu to give it its own width. the submenu ul (which is what your targeting has nothing to do with the width of the li's unless they are sized based on percentages.
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
Please help me one way to make the parent div cover all the div inside it. These ones inside have position attributes? Please edit to my fiddle of my bellow comment.
Thanks.
You have to add "padding bottom" to contain the absolute child div.
.parent {
position: relative;
padding-bottom: 50px;
}
Padding bottom will contain the amount of "top: 50px;" you set for the .child-2 div. Since the child-2 has absolute value, you will have to change the padding-bottom value with the same value of the .child-2 top value. Sorry for my English.
Check this working fiddle: http://jsfiddle.net/3xw6r6hf/10/
Try this
.parent div{
code here
}
the added space and div selects all divs inside the parent container.
If I am understanding you correctly that is. Please let me know and ill help you accordingly.
EDIT: your issue is that you are using absolute positioning on your child2. Its in a relatively positioned parent so it won't mix well.
I tried positioning a div element using margin-bottom. For some reason the margin-bottom doesn't appear to affect the position of the element. I tried searching for an answer, though all answers had something to do with position:absolute, and I still couldn't get it to work.
However, I did manage to position it using a negative margin-top, but I'm still curious to know what causes it not to work.
Heres the fiddle showing the HTML/CSS.
(what I'm talking about is the image. The margin-bottom is set to 100px.)
Try to put the position absolute property in the DIV with the class "productImage". Like this, for example:
.productImage {
display: block;
float: left;
position: absolute;
left: 450px;
top: 60px;
}
Using this i've manipulated the image sucessfully. I hope it can help you.
A margin on the bottom would only work if the element was positioned via bottom somehow. Right now, it's positioned based on its top and that is being set by the H1. If you don't want the H1 to be a block, set it to display:inline-block. You could also set the width to be that of the paragraph.
As you noted, this is why a negative margin-top works.
Use one of the following:
Negative (or simply smaller) margin-top
position: relative and a negative top
Further explanation:
margin-bottom, in normal document flow, will only affect the position of elements that come after it, due to the fact that normal block-level elements will expand their height with the height of their children. Thus, the position of your element is determined by the elements before it, as well as its own margin-top.
Consider adding display: block.