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. ;)
Related
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?
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 an HTML element which is set as position: fixed in the CSS. However, when the user scrolls to the top of the screen, I notice the fixed element overlaps another element.
How do I tell the browser that I want the element to stay below the other element, but otherwise ignore the scrolling like most fixed position elements do?
EDIT: Your answers are all great, but I guess I wasn't specific enough: I want the object to stop moving, rather than go behind the other element. Also, I can't use jquery; I can use Javascript, though.
If you want to to only start scrolling after you've 'passed it', use jQuery Waypoints. Specifically sticky elements.
If you just want to to hide behind the other element, assign it a z-index lower than the other element. (z-index only obeys elements with position: absolute, relative, or fixed.)
Z-indexing rules still apply to fixed elements. Give it a lower z-index value to have it render behind the other element(s).
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
Problem part 1: Basically I have the age-old IE problem of overflow: hidden; not working in IE. The fix (which does work, admittedly) is to also add "position: relative;" to the element/parent; however this causes a problem for me. Firstly I want to know if there's another way without appending position relative.
If this is the only solution though, I'll outline the problem it causes:
Problem part 1b: I'm using jquery 1.4.2 and jquery ui 1.8.4. The concept is basically for the user to pick up a card (draggable li item) from the pile (ul surrounded by div) and place it into the appropriate category (initially empty ul items). Because positioning each card on top one another in the pile with css with position: absolute; would cause problems with the interaction, I've let them all display one after eachother in a column and used a div of set height and width with overflow: hidden to obscure the rest of the cards instead. Works great in FF, but in IE doesn't work due to the overflow: hidden bug. If I put in position: relative, for both browsers the z-index of the card when it is dragged appears to be behind everything outside of its parent div. I've tried changing the z-index on every element on the page to specify the order, but this appears to be disregarded entirely. I'm really hoping not to have to get into the jquery to make changes. Any solutions?
Attached are pics which make this wall of text a little clearer. Picture 1 is how it should work and does in FF without position relative. Picture 2 is when position relative is added to the mix. Both pictures show a card being dragged to a position in a new column.
Picture 1: http://plldd.net.au/storage/overflowhidden.jpg
Picture 2 is at the same location and is called positionrelative.jpg
Thanks for any help you can offer.
can you try wrapping it all in another div with position relative? This div surrounding everything instead of the immediate parent.