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.
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.
I have a multiple Vboxes/Hboxes inside a parent Vbox. I have hide/show effects for the parent container, but I want to know if there is a way to make some of the children ignore this affect that they receive from their parent container.
There's none. The DisplayList is an hierarchical structure, and every leaf object is displayed by using all the parameters from parent objects, including visibility, rotation and more. You may, however, enumerate children in your Vbox/Hbox to undergo the effect, and select (and manually apply) the desired effect only to those that should be hidden. Note that your Vbox/Hbox's visibility should remain true, and opacity at original value, should you use fade in/out effect, otherwise those children of your Vbox/Hbox will too get altered.
You can workaround by adding extra layer.
Then parent would have layers:
New layer with parent background (apply effect here)
your child (effect isn't applied as its parent has no effect)
Hope that helps.
With position: absolute, you place an element by defining one of it's corners (often using the top and left properties). Is it possible to place it by defining it's center? (without knowing it's width/height?).
I have answered a similar question with this jsFiddle link
Link to the similar question with my answer: Position the center of an image using css
You can then use top/left coordinates using pixels, and it will use the center of your object no matter which width/height and this may be dynamic fit to content. One problem may be you need to set some z-indexes and styles so the other wrapper divs won't bother the rest of your content, this may be a drawback to use this approach.
The solution lies in the fact to use a wrapper div, with the real positions, and within that another wrapper div containing styles: position: relative;padding-top: 25%;margin-top: -100%;margin-left: -100%;. The margin-left style will apply easily, but the margin-top needs the padding, hence the extra wrapper div.
If you want another approach, you will have to use Javascript I suppose.
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.
I am developing a paint board application using flash builder. User can draw some shapes objects(ellipse, circle, rectangle). I want to implement grouping/un grouping feature some like ms-word in my application. I group multiple objects by putting them inside a container(UIComponent). Now i apply resizing to container and it resize well. I am using a free object handler API to apply selection handle over the container. I want to resize and reposition all children with respect to container changed size. Every thing goes well until all children inside container are having rotation = 0. But if there is any child which is having rotation >0 and <0 things goes worse. The child resize but not in a proper manner. I stretch the parent container width and it increase the height of rotated child. Is there any way using Matrix class or something else to transform all children in same direction and same ratio respective to container?
Are you using Flash Professional? In my experience, placing objects within a symbol is the best route has been easiest to achieve this for me.
Select all the objects you want to link together (can also include existing symbols)
Right click and select 'Create Symbol'
Name the symbol what you'd like, then click okay
You can then freely transform any instance of that symbol, which retains the relationship between the objects within (including rotation).