I am trying to show a hidden Div on click event using JS. This Div contains UL which sometimes happens to be of height more than the parent Div. In such cases, parent Div scroll appears.
What I want is to show this list inside a child Div, on top of parent Div. This way the height of list will not affect the UI of page.
Here's the image of what's happening :
Note: Blue border represents the parent Div & list with grey background is inside a child Div.
And I have already tried applying position:relative;z-index:9999;
Make sure to give the parent a zindex (lower) too. See Z-index does not work in ie fir more ideas.
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I have a dropdown menu that hides behind a div even though I've set for it a much higher z-index here's a screenshot.
Hidhing menu
By the amount of information I can collect after seeing that screenshot I can say it is either 1 of the following 2 problems:
1. The parent div of the div with class 'dropdown-menu' do not have "position: relative" property applied to it.
2. Two divs need to be sibling to each other to hide or show one of them behind the other using z-index (they can't have parent child relationship).
I'm trying to use overflow:hidden on a div element so that when I resize it the text it contains doesn't overlap other elements, but when I do it my :after element dissapears too.
Here's a couple images:
That happens because the pseudo-element is positioned outside the left edge of the div element, not inside.
See if you can move the pseudo-element to a different element (preferably a parent) where it won't be affected by the overflow setting on your div. If no suitable element exists, you may have to add a wrapper to the div and put the pseudo-element there.
I have one parent div and multiple child divs placed in one row. These child divs are created dynamically, and I don't know how many of them will be created in the moment of rendering page. I want parent div to have fixed width, and to have horizontal scrollbar in case all child divs are not visible. This works fine.
But when I have content inside my child div, that div moves down, and it's not alligned with other divs.
I'm not sure where is the problem?
Here's the jsFiddle example.
I tried to put position:absolute to inner content of child div, but that didn't help much.
I added:
div {
vertical-align:top;
}
http://jsfiddle.net/LSZZx/30/
When I try to turn a div into a link, all of the area to the right of the div also becomes a div. The div displays as a block and has a fixed width. When I make the div linkable, the white space to the right of the div becomes linked, too. I thought that making the div a block and fixing its width would make only the area inside of the div linkable.
Without having any code to look at, I would imagine the problem is that you have it set as a block. By definition the block attribute makes the tag it is acting on display the entire width of the parent container. Try changing it to display:inline instead.