I decided to use:
* {
-webkit-transform: translate3d(0px, 0px, 0px);
}
when I saw that it makes my animations much smoother, probably because it forces hardware acceleration. But I also need to make some z-index tweaks in order to place a shape in front of a text, to mask that text at some point of an animation. The thing is: my (grey) shape must move synced with another shape (the green one in the example below), which is behind the text.
I built a simple example to make it more visual. It works nicely on Firefox, but I just can't get it working on Chrome and Safari. Well, it works if I remove the translate3d thing, but since my actual project requires lots of sliding and smooth animations, the user experience would suffer if I did that.
Without translate3D, it's possible to position a peer DOM node (your text) between another peer (your handler) and one of its children (your mask), but only because neither your text nor your handler have explicit z-indexes. In this case all non z-indexed blocks are rendered first and then the mask is rendered last - ending up on top (even though it's a child element). Does this make sense? Well it's how browsers work.
However, when you added translate3d to "*", you added a "stacking context" to each element, so what "happened to work" without a translate3d, now doesn't. Incidentally,adding an explicit z-index to each element in your example - also "ruins" your mask. Again, you can't position a peer DOM node between another peer and one of its children, because the children inherit the parent's z-index as far as positioning relative to an uncle/aunt node goes.
My advice is to unnest your stuff so that everything you want to position relative to each other in the z-axis is a DOM peer. This requires manually calculating every element's absolute positioning, and you lose the benefit of overflow clipping, but hey, it works. You can also duplicate this by doing 3D transforms with positive and negative z-values - but again, only among peer elements.
(Marking the z-index as !important, just undoes the cascade and places the element on top of the cascading stacking order. It's a hack.)
Got it! We can use CSS clip Property to mask the text and update the rect values based on the other object's position. Here's some info w3schools.com/cssref/pr_pos_clip.asp. This link is pretty insightful also http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties.
And finally here is my project, done http://iuqo.com. When you drag the background you see the text being (vertically and nicely) cut. Exactly as I wanted it.
Related
I've been working with HTML and CSS for a while now.
Every time I work in CSS, I have a feeling that I'm not "doing it right".
For instance, when positioning different divs and elements on a webpage, I use "position: absolute" and "position: relative" quite often.
This can sometimes be very tedious to find the "right" position and results in very ugly numbers, such as:
position: relative;
width: 1300px;
height: -720px;
In addition to above, it also makes it very difficult to edit said divs and elements later on if I change my mind about their appearance or position.
I've watched a lot of tutorials on YouTube where people use "margin" and "padding" tags to position the elements on their websites.
I'm very confused by this since those tags are supposed to be used for creating space around elements and not actually change their position.
The strange thing is, that it is much easier to edit the website using "margin" and "padding" tags later on, if you change your mind about the appearance/positioning of those elements since they won't move around and overlap each other.
I apologize for the long query but this has been bothering me a lot lately and I would appreciate any advice regarding the positioning of elements in CSS.
Thank you
The biggest distinction between position and margin or padding is that when you set the position to absolute, relative or fixed, the element is taken out of the "normal flow" of the document and placed in its own layer. This is what allows you to use the z-index property and stack elements on top of each other. This has dramatic advantages when the elements in question are going to be dynamically sized or animated because doing so won't cause all other elements in the document to have to "re-flow", nor will the entire document have to "re-paint". In fact, when working with dynamic sizing or animations it is strongly recommended that you take elements out of the flow this way or performance can suffer.
Beyond this, understanding how absolute, relative and fixed positioning work is essential.
Absolute Positioning positions the element relative to its nearest ancestor that, itself, has been manually positioned or the body element if no ancestor has been positioned. The element is taken out of the flow and any space the element was taking up in that flow is removed.
Relative Positioning positions the element as an offset to its original location in the normal flow, but leaves the original space that the element took up in the document even though the element is now in its own layer.
Fixed Positioning is similar to absolute, except that the position is not relative to anything. It is fixed at an exact location you specify.
While all of these will pull the element into its own layer, how the layers are stacked (via "stacking contexts") are dependent upon which type of positioning you've used and the structure of the elements being positioned.
These are the reasons to use position. If you are not in need of new layers, using CSS float, flexbox are tools that can offer alternative ways to design a layout.
margin and padding should really not be used for the layout itself. They are used for small tweaks within a layout.
In summary, the default way the a browser lays out the contents of a page is the CSS Box Model, but using CSS position is one way to have certain content use that box model in different layers from the main content. CSS floats offer another, separate layout algorithm and Flexbox offers yet another. In the near future, the CSS Grid specification will be standardized and yet another layout paradigm will be available.
But margin and padding are not layout models. They are just tools to use in whatever layout model you happen to be using.
Is there a way to position an element relative to it's original position, except for x=0 - that is, the element is positioned at it's original vertical coordinate but is glued to the window's left border?
Eventually, yes.
I believe the term is going to be "sticky".
It will say: this element is positioned relatively, until it passes a specific threshold, and then it will be a fixed-position, located at... wherever
I think there was some preliminary support in mobile (for things like responsive menus/headers), and the webkit developer branch.
For real-world support, you're best off to just use JavaScript.
I am trying to replicate a Udacity question in html. The original question is here. (*)
My example is here. As you can see(**), the only problem is the positions of the radio buttons(***). I've seen the positions using gimp, and tried to use those into the html. However, not only there is an offset (which is perfectly managable in itself) but also this offset varies from button to button. Even worse: there seems to be some kind of interaction: removing some buttons makes the rest get closer to where they should be.
I (suppose) I could just guess positions till I got it right, but as I will probably do this many times, I'd rather understand the problem better. What is going on ? Is there a better way to achieve the same result ?
(*) I've already been given the suggestion to look at the source, and tried to, not with much sucess
(**) I opened the file on firefox 14 and chromium 18
(***) they were meant to be on north, west, east and on the square just below west
Relative positioning is not what you want. Relative means offset the element from its nominal position, but then treat it just as if it were in its original position with regard to how it affects subsequent elements in the flow.
What you actually want is absolute positioning. First, you need to apply relative or absolute positioning to the container (the graph div), and then any absolute positioning you apply to the contents will be with respect to that container.
This terminology is a bit confusing, of course, since absolute positions are actually relative to a container.
I've been trying to use the z-index css attribute to make one element always be in front of another, but it isn't working. The z-index of one element is clearly greater than that of the other, but it is still positioned behind the other element. Could it be because one of the elements (the one showing up in front) is an iframe? Does anyone have any other advice?
For those that arrive here later, the correct answer is to put position: relative; or any of the other position props on the problematic elements.
My recommendation would be to put this on every element involved with the problem:
position: relative;
z-index: 0;
and then increase the z-index on the back-most element(s) that are in front of the iframe.
If you do that, you will start winning pretty quick.
In my testing here, z-index only works if you have position explicitly set. Test it by modulating your z-index values and then trying to highlight the text on the screen via mouse-clicking. You should see evidence of layers acting either as desired or horribly incorrect.
I find it works great if you press F12 (to open dev pane, in Chrome) and then click the Inspect Button at the top-left or press CTRL + SHIFT + C. Then you can mouseover everything and see what their stacking context is relative to adjacent elements.
UX BONUS TIP: Remember, users may want to copy text, so make sure they can select it.
If you are having problems, most likely you are either:
missing position: relative; on an element's parent, or
missing z-index: 0; somewhere
Remember that the z-index index only counts on absolute elements. Both elements should has the position:absolute. More info in the CSS 2.1 Specification
I need to be able to layer image in canvas... how it is possible to insert image between two, or order the image, more like layer in photoshop... on top or below. In fact, i alredy draw many images, i need to be able to inser one between those, or just use a dummy and change it later, i dont know
what is the way to do that ?
The easiest way to do this is to just stack all of your elements inside a parent container and adjust the z-index CSS property of each layer.
The higher the z-index, the closer the layer is to the top of the stack. Elements with lower z-index values are obstructed by elements with higher values.
Note that you'll likely have to set position: absolute; on each layer within the container and then align them to, say, the top left corner of the parent element. Otherwise they won't overlap one another.
Alternatively, you can manage the layers based on their position within the DOM tree. The later the element is defined in the DOM, the closer it will be to the top of your layer stack (CSS properties aside, of course). So, you could theoretically use insertBefore() or a homespun insertAfter() to place your layers in the required location within the DOM and avoid z-index manipulation.