I need to use position:fixed; for top div so the animation happens then I want to show other content and elements under it .
Right now the hello divs are over the container which I want them to be under the blue container .
This is the Codesandbox link
It looks the body is the blue container, so you can't put anything outside of that, but you could style another element as the blue container. z-index can be used to control what appears above/below other positioned elements.
Related
Im thinking about way to detect a element index when this element is inside of some other element.
So red box is my div, black box is centered absolute in center of this div. 1,2,3 are the list element. How to detect on scroll when list element is inside of black div?
I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?
I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.
I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.
This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.
I have a container div, and numerous elements inside of it (i.e. spans, img, divs, etc).
I would like the container div to scroll naturally if its content becomes too large. However, there is ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large.
Not even sure if this is possible.
Thanks in advance!
PS. No jQuery please! :)
Lets say this "ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large." is div#inner. You can set a max-width or max-height to it and make it overflow:hidden so once it reaches the max size, it will stop growing and hide the overflowing inner content.
Hi all. I'd like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I'm using the CSS 'outline' and 'box-shadow' properties to do this. The issue is that when the DIV is the full size of the outer div, you can't see that it's selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.
The attached images shows the layout of the divs, red is the outer div, purple the 'outline' and black the DIV I want to highlight - in that example the purple highlight to the left is clipped.
So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn't clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?
EDIT: It looks like this simply isn't possible in HTML/CSS in the way I described.
Set theblack div to "positon:relative". Then put the outline into that div, and set it with "position:absolute". With top,left,with and height you can put it "around" the black div.
Edit:
Sry, the black div has to be position absolute, too. Working example see here:
http://jsfiddle.net/t94FV/
Maybe you can use margins with percentages.
The trick is in only parent cover div with relative position. No position:relative children of overflow:hidden div. Only parent!
<div class="trick-container" style="position:relative">
<div class="overflow-hidden" style="overflow:hidden">
<div class="no-relative-position-1">
<div class="no-relative-position-2">
<div class="no-relative-position-N">
<div class="position-absolute" style="position:absolute"></div>
</div>
</div>
</div>
</div>
</div>