Why is my div cutting off the content of its contained absolutely positioned div?
I am trying to get my twitter bootstrap popover to be "on top" of the containing div. As you can see below, the popover is being cut off.
Z-index
Popover is absolutely positioned, so figured I'd try increasing z-index. Didn't work.
overflow: visible
Then next I figured I'd check for all the containing elements having overflow set to something other than visible, but that also didn't change anything.
Is there some CSS attribute I'm forgetting to check?
Related
I'm trying to make a kind of chat room. When new messages come, previous messages move up and dissappears when they leave the div.
I want to make the div scrollable to see previous messages but overflow: scroll doesn't work.
I tried to set elements to position:relative instead of absolute but then the elements position themselves chaotically.
This is what I have: https://jsfiddle.net/2Lgq1zfa/1/
I checked your code but there was no .ventana class defined for js or html. However to make scrolling work on absolute positioned elements you should define width and height so the browser identifies when the overflow happens.
I hope this is what you needed. ;)
So, I tried doing position:absolute, but whenever I place something new, (eg a div) the other div gets pushed down.
Eg. without other div
Box
With other div
other div
box
Thanks :D
Are you sure the CSS rule is not ovewritten? (Check this with a browser code inspector, such as Firefox's Firebug or Opera's Dragonfly)
Additionally, If you want the div to be put on a place despite srolling,
use
position: fixed
instead. This will keep your object on a fixed place in the page.
You can usually use position:fixed or position:absolute.
If you want the element to be stuck on the screen no matter how to scroll, you can use position:fixed. Make sure that your top & left or bottom & right are set appropriately. Also make sure that the z-index is set appropriately, so no other element is covering it.
position:absolute; DOES depend on the parents of that element. If a parent of that element is positioned, then the absolute positioning will position the element within that element.
do you have examples of your code?
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I'm experimenting with jquery.scrolling-parallax.js for parallax backgrounds.
The background elements has z-index 333.
On all elements on the site i can make the backround be behind or in front of the elements by using z-indexes below or over this.
But i have problems with my header.
I have a header with fixed position and z-index 232 to have the backgrounds be seen over it.
However, in the header div i have two other divs containing logo and menu. These are position:relative and have z-index:999 since i dont want the background to be on top of them. But this does not work!
If i switch the whole header div to z-index over 333 it works fine, the background appears behind it. But i only want it to go behind those child divs!
Appreciate your help
If I understand your problem correctly, I think the problem is that your logo and menu should not be using position:relative. Try either using a different type of positioning or placing their div outside of the header div.
By using relative the child is probably taking the header divs z-index.
I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem