.classname {
position: relative;
}
position relative in css without top right left and bottom mention,
I read that this not change any position, but in some web page write position: relative; without top right left bottom mention and if I delete "position: relative;" then position will change.
Can I know what exact use of "position: relative; " without top right left and bottom mention.
This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
The most known use for setting position relative on a parent element is to position child elements, set to position absolute, relative to the parents position.
Related
I cant figure out how to position a button to always be locked at the bottom of the container no matter how much text is above it, at the moment it is positioned below the last p tag.
here is the page for more context.
the button is the "change read status".
https://repl.it/repls/AmusingLuxuriousColdfusion#index.html
Change the position to relative of your card div and then change the button position to absolute and bottom: 0
I have edited it in the repl for you.
https://repl.it/join/epzcgyjb-t2drink
You should use the position: absolute property in your CSS since you are working within a div.
.[your button class] {
position: absolute;
bottom: 0;
}
What this does is it makes the position of your button relative to the container (i.e. the button's x and y coordinates will be based on the borders of the container). Then, you can use top, bottom, right, or left to position your element exactly where you want it to be. In this case, we just need bottom since you want to position it at the end.
Usually, elements are positioned based on position: static. There is also another property of position: relative, places an element relative to its current position without changing the layout around it. You can read more about the difference between position: absolute and position: relative here.
Given the following css
li.menuitem{
position:relative;
top:0;
left:20px;
display:inline;
I would expect each li to be positioned 20 pixels further left than it would be without position relative.
However, what happens is that as I change the value of left, all if the menu items move together in relation to the left position. In other words, the space between items does not change.
While there are other ways to achieve what I want, I am curious as to why both items move and the distance between then does not change.
Thanks,
-dmd-
Because that is what margin-left is for.
Here's an illustration: if you and I are walking side-by-side and we both take 20 steps forward, you and I would still be side-by-side.
Similarly, position: relative doesn't take into account the new positioning of other position: relative elements around it. They all move relative to where they naturally are, and not relative to where other elements now are.
The MDN entry for position: relative states:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute;
Would there by anything wrong, or should I say, would anything break if I was to write:
* {
position: relative;
}
or perhaps the below example, as these are usually the only elements I require the relative positioning on:
div, navbar, footer, section, aside, header, article {
position: relative;
}
According to W3schools, all elements are position: static; by default which is positioned according to the normal flow of the page.
"HTML elements are positioned static by default. A static positioned
element is always positioned according to the normal flow of the
page."
and according to the same source, relatively positioned elements also position according to the normal flow of the page unless overridden with CSS:
"The content of relatively positioned elements can be moved and overlap
other elements, but the reserved space for the element is still
preserved in the normal flow."
Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.
At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.
An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.
If you apply position: relative to all elements in the page, you won't be able to use position: absolute efficiently, because you can't position an element to the grandparent and you will probably break in a unpredictable way external plugins/modules that rely on position: absolute.
You may encounter problems with z-index (for example in dropdowns menu), and you'll end up overwriting this behaviour with position: static and position: absolute.
As for me using position:relative is not good - because sometimes you need to position elemet relatively browser window and it will give a problem to you. But if you are sure that you wont doing this Go ahead
The first thing that jumps to mind and one that we saw in one of our sites recently was that any absolutely positioned elements within those relatively positioned elements will have their position offset from that element.
As an example that would be a problem if you were trying to position to the centre of the body.
Setting position:relative to all elements is a bad idea. This can affect solutions built around z-index. As per html design positioned elements will display on top of unpositioned elements. If you set position for all elements some time unexpected elements participate in z-index calculation.
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
Hope this helps,
FuzzicalLogic
Defining position: absolute in CSS takes the element in question out of the flow of the document.
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned.
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. When you resize your browser viewport, that element will remain in that position.
I think what you want is to position your element within the document flow, without using absolute positioning. This can be achieved with a combination of floats, margins, and padding.
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.
So in your example, if i were to to guess without seeing your HTML and more of your CSS,
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.
Also important to remember that absolute positioning takes the element out of the normal flow of the document.
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. Therefore, your logo is not being positioned according to the header, but according to the document's window. So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances.
Try setting position: relative on your #header element. This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window.
What is the best way to position and align images on an HTML web page?
I will have approximately 10 user-controls that each have a set of images on them laid out in a specific pattern, eg - an arc, a circle, straight line, some other sort of curve.
All the images will be the same size.
How can I achieve this using best practices?
Absolute positioning is probably the way to go for something like that. With absolute positioning, you basically just define the x/y coordinates of each one. To position an element absolutely, you set position: absolute; in the CSS, and then top: 5px; and left: 5px; (that is, 5 pixels from the top, 5 from the left; you can also use bottom and right instead). Note that though it's called "absolute" positioning, which would make you think it's relative to the whole document, it's actually only relative to the first ancestor element with positioning other than static (static is the normal positioning mode). So if you wanted to contain a bunch in a parent and position it normally, you would set it to position: relative;, or you could position it absolutely as well. If no parent has non-static positioning, it will be relative to the whole page. Another thing to note, is that absolutely positioned elements don't take up any space, so for instance, if you've got a big element absolutely positioned, and the window is too small, there won't be scroll bars.