Hi everybody I have a school project where I am trying to animate some objects and I got the css transitions to work but I don't want the other elements to be affected by the transition. I have looked at other examples that talk about using css positioning to overcome this problem but when I adding positioning to my example the images start twitching and the other the html elements go all over the place. I am attaching my jsbin. I am using angularjs to loop through an api that I am using, I don't know if that is affecting it somehow?
http://jsbin.com/opEhAVi/1/edit
The element that is animated needs to be absolutely positioned not to affect the other elements when it for example changes size.
A way to handle it is to make a list of relatively positioned elements. These elements will just be containers to achieve the layout you desire. Each element then contains an absolutely positioned element. This is the content, the element to be animated. As it is absolutely positioned it will not affect the other elements.
I made some quick changes to your example that will hopefully guide you further:
http://jsbin.com/ogAvAZUm/2/edit
Related
Code pen showcasing problem.
https://s.codepen.io/NoMan2000/debug/rdPEYJ/xnrabdnqJadA
I apologize for the rather gnarly HTML, but this is output from a next.js project so the bloated mess is part and parcel of that.
Anyway, the problem can be seen in the element #header-menu-buttonList. The idea is pretty simple, a menu that goes underneath the main grid element. But for whatever reason, it just sits there on the page.
You can pick it up in the debug tools and see that it has a width and a height. Messing with its z-index doesn't make the object visible, only removing the position: absolute makes it visible on the page, but that opens up a whole host of other issues.
So, anyone know:
1.) Why the heck it's doing that?
2.) How to either fix it or work around it?
Thanks for the rubber-ducking. :)
So the issue is that the parent element is positioned absolutely, and the child element is positioned absolutely. I'm not up to snuff on all my CSS rules, but this appears to keep it in the DOM but not render it visible.
The solution is to set the child #header-menu-buttonList to position: static and the parent #header-menu-button to position:absolute.
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 html layout done using absolutely positioned div elements and a backgroung image. I want to keep the layout the same vertically (each individual part/page representing a data set). I do not wan't to change the div positioning from absolute as this messes up things and I am running out of time for this.
I realize I can have multiple body tags each for every data set and as this html will finally be generated from xml using xslt this is not a problem.
The issue is that as the div elements are absolute they do not appear in the subsequent body tag (only background image appears). I tried changing to relative and the div actually moves to 'next page' (body element), but as there are several divs, when all are laid out they get misaligned.
I will be grateful for some advice on how to tackle this either by fixing my html in some way that will not be too time consuming or by using a tool that can combine several html content in to one flowing page. Any other piece of advice is also very welcome.
From what you've posted, which could really use some of your HTML as an example of what you're trying to do exactly, you should be able to simply wrap each of your "pages" in a div with the position: relative CSS style.
The inner content will then be positioned absolutely from the boundaries of its parent wrap. You would then want to move most of the styles you currently have applied to your body element (like a background image) to the wrapper divs.
Basic example: http://jsfiddle.net/AsWCN/2/
I am new to the world of coding, XHTML, CSS as well as PHP. I have come across numerous tutorials regarding positioning i.e. relative, absolute and fixed however have no idea when I have to use them or when it is the best to use them. I would appreciate some examples.
ALA has a nice tutorial (there're lots of examples)
CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.
For understanding CSS positioning, you need to get familiarize with the "CSS BOX Model"
There are tons of tutorials online.
Here are some good ones with examples for beginners:
http://www.brainjar.com/css/positioning/default.asp
http://www.tizag.com/cssT/position.php
http://www.alistapart.com/articles/css-positioning-101/
Two that I frequently use are:
Relative positioning: helps you style elements relative to other elements. E.g. you want to move an input to the right relative to the div it's inside.
Fixed positioning: great for things like Refresh suggestions that get 'fixed' so that they follow you wherever you scroll.
It's best to play around with them and see for yourself.
To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.
http://www.handycss.com/how/how-to-use-css-positioning/
My understanding is that we should use positioning either when we want to place any CSS element with respect to view port(position:fixed) or we want to place CSS element with respect to container(container get position:relative and child get position:absolute). But you should know limitation before using position absolute or position fixed. Absolute and fixed don't contribute to height of the parent element. This can create various unexpected results. Suppose you want to apply background image on relative element which has absolute element containing most of content. Background image will not spread over your content as it will not get height of content. Also you should not heavily rely on top/left/bottom/right for placing elements. They might help you to get expected arrangement on one view port size but can distort it completely on other view port size/resolution.
I'm learning HTML and I wanted to practice by recreating a invoice sent to me by Electronics Expo.
However, I used the background-image property and repeated it by repeat-x and now, the background stretches across the page so much that it has a horizontal bar to drag.
http://htmlpocketreference.110mb.com/index.html
You can see what I did in my link above.
Also, I would really appreciate some advice on simplifying my CSS coding. It seems really messy and I have to move every element once something changes. -.-
Thanks!
It's because you have relatively positioned elements that do not have a fixed width - these elements take on the width of their parents, which is the width of your invoice, and stick out of the page, causing the overflow. Give them a background color, and you can see this quite clearly:
Give the elements a fixed width to fix this, or alternatively, look to other methods of laying out your elements, like floating them.
In addition to this problem, you're also repeating the id attribute, which is creating invalid HTML. You should look at using the class attribute for multiple elements sharing the same style, or even better, look at using inheritance and the cascade to not have to give every single element an id.
Further reading:
CSS Positioning 101
Inheritance and Cascade from The Web Standards Curriculum
Problem is not the background. The problem is the position relative you're giving to the block level elements without defining their width...
The h2 elements like (Ship To:) and (Phone) and all the paragraph elements. You need to give these elements a specific width and it will work fine
Try giving these elements a background-color: yellow; to see how the flow inside the document ( for your debugging purpose ) and you will see what I mean