I read that some CSS transform properties do not trigger layout:
scale, rotate, position, opacity
This might be an obvious question, but does that mean they will always be applied independently regardless of other contents on the page?
For example, when I change a position property with translate(x,y) to move down a box, will it not push the contents below? I made a fiddle myself, and it seems that changing position is completely out of the dom flow.
Yes you're right, transform will not cause other elements to flow around it. This is why the div on top will not push the div on bottom down with it.
Check this link for more description.
Related
I am attempting to work out how Invision's blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.
I would have thought this would be a CSS animation, but it doesn't appear in Chrome DevTools 'Animations' tab.
How does this animation work, and why doesn't it appear in the 'Animations' tab?
I had a quick look and here is what I came up with:
Let's start at the element .post-hero: this acts as a wrapper and has position: fixed to make the image more or less stay in place as we scroll.
Inside this there is the .hero-bg element which contains the background image itself. Note that this element has inline styles setting its background to none, but it has a data-bg attribute pointing to the background image itself. My guess is that on page load, some JavaScript is used to take this attribute and add the actual image.
The actual image is set as an <img> element, inside the .backstretch element inside .hero-bg. Now, the .backstretch element is where the animation itself happens: the opacity on this element changes as we scroll (to change the amount of shading), and there's a transform with 3D translation and scaling on the element changing as well. I guess this is done using JavaScript and a scroll event listener on the page.
Following .hero-bg, there is .hero-overlay which has a background color of #252b33 and an opacity of 0.35 to provide the shading effect on the image, together with the opacity of the actual image changing as the page is scrolled.
Edit: if you right click the .backstretch element and select "break on attribute modifications", then scroll, you'll find that the attributes of the element are modified in a file called CSSPlugin.min.js. Googling this seems to point to CSSPlugin being a plugin for the GSAP animation library... I don't have experience with it myself but I know it's popular, others can probably confirm whether or not this is what's used to do the animation. My guess is that the animation is done using GSAP CSSPlugin.
I have a scenario where I need to animate a div that has a children acting as background helpers. The children need to stay behind the div's background at all time. Without animation adding
z-index: -1 keeps them behind the tranparent background. However they do not stay behind the background when animating.
I have prepared a jsFiddle to show this:
-->https://jsfiddle.net/Jonathan002/gmv70wz7/6/
I know I can fix this by adding an extra div tag to be the background instead. I want to avoid this and direct the question on why the animation will alter my z-index values. Is there another property change happening when the div is animating?
How can I get the div to animate-in naturally (with no changes to dom) while retaining the z-index values?
Elements with transform and opacity don't obey regular z-index order.
That's because browsers create a separate layer to accelerate animations with transform, and per spec the opacity property requires special handling for compositing.
on this webpage Voting System I have lunch pictures when you move mouse cursor over camera icon. Span which contains image have z-index 1000, tables have z-index 1, but images are showing under tables. Can you help me please? What's going wrong?
All your tables have z-index 1, therefore they are at the same level and source order will determine which tables get on top of the other if they ever get to overlap.
You're pictures may have a superior z-index, but they are contained by your table.
z-indexes are not global, they apply to a "stacking context". Everytime you add a z-index to an element (and some other css properties too, like opacity or transform in your case) this element create it's own stacking context for the children it contains.
You are going to have to use different positioning. For example:
imageclass{
position:absolute;
}
If you do not do that then your elements are positioned relative to the their parent element.
Please include your code if this does not work as just looking at a web page is not enough to fully diagnose a problem.
Link to more info about positioning
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html