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.
Related
I tried to position my table to the bottom of my PDF page. However, I always got "unexpected error" when I used "position: absolute; bottom: 0px;" to define my table's position.
See http://bfo.com/products/report/docs/userguide.pdf (page 24)
There is one critical condition when using absolutely positioned
elements; the element cannot be the child of the BODY element. This is
because unlike HTML, elements must be assigned to a page before they
can be positioned, but as absolutely positioned items are independent
of their siblings, there’s no way to decide which page they go on. To
position an item at an absolute position on a specific page, it can be
placed in a “background-macro” which is then assigned to the page.
You can use position: absolute; but it needs to be in a container <div> or background-macro.
I see a lot of sites setting the position: relative; in block elements when they won't use position in inner elements. Is there any other reason to set the position relative?
Example:
<div class="parent">
<div class="parent__container">
other elements here.
</div>
</div>
.parent {
background-color: blue;
}
.parent__container {
position: relative;
// etc
}
And the inner elements are not making any usage of position, sometimes i even see the .parent with position: relative; set.
This is very very common, i can point several sites that are setting the position without any necessaty (at least i think).
Thanks.
There is basically 3 reasons why one set an element to position: relative
To re-position the element itself, i.e. top: 20px
To use z-index on that element. A side effect, if one does not set a z-index, it will still position itself on top of statically positioned elements.
Limit the scope of absolutely positioned child elements, so a child of the relatively positioned element can be absolutely positioned within that block.
Here is an old article that describes the difference between the most used position values:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Most websites these days use "relative" positioning to make their websites flexible and compatible with small-screen devices such as smart phones, and non-16x9-conforming devices. The original purpose of using relative over absolute positioning was to allow the programmer to allow the web-page to handle the positioning based on hierarchical order unless otherwise stated by the programmer.
Edit: Note that by defining "relative", it gives an element and its children a certain hierarchical order in the DOM model; it does not necessarily tell an element how to position itself (aka knowing to be aligned left or right), but rather creates a "box" or "container" in which an element and its children are given certain hierarchical order based on its nesting within HTML that the HTML document as a whole must conform to. In other words, "relative" defines the priority/hierarchy of an element in terms of its parents.
Conversely, if a programmer wanted to make certain elements staticly positioned, they would use "position: absolute;" to make that element static, relative to its parent. For example:
<div class="parentA">ParentA Text
<div class="childA">
All elements become positioned absolutely, requiring defined positions using margins, alginment and etc. Note that this may or may not be inherited depending on the browser and the code.
</div>
</div>
<div class="parentB">ParentB Text
<div class="childB">
All elements become positioned relatively, requiring no defined positions using margins, alginment and etc, unless desired. This makes the webpage very flexible (dynamic in the position of its elements).
</div>
</div>
<div class="parentC">ParentC Text
<div class="childC">
All elements in and under childC become positioned absolutely relative to parentC, requiring defined positions using margins, alginment and etc.
<div class="grandChildC">
Grandchild
</div>
</div>
</div>
<style>
.parentA {
position: absolute;
}
.parentB {
position: relative;
}
.parentC {
margin: 60px;
}
.childC {
position: absolute;
}
</style>
As seen in the above, since parentB is relative, it starts wherever parentA left off. Since parent A has no size and is defined as an absolute/static object, the two divs overlap. Conversely, since partentC is relative and childC is absolute, childC will move to wherever parentC is, however, its outline will remain static and on top of other elements, that is, static relative to the position of parentC.
I hope that this answers your question. If not, be more clearer in what you are trying to ask.
.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.
I understand that an element with position relative will be used as the fixed for elements inside it with positioning absolute, and that with relative I can push the element around, but if I don't add any other attributes, will an element with this style:
.element1 {
position: relative;
}
always render the same as one with:
.element2 {
position: static;
}
If not, when would they differ?
It will appear same because you are saying that I am going to position you and not instructing where to position so unless you position it will remain at same place.
I've found a wiki entry dealing exactly with this topic:
http://www.w3.org/wiki/CSS_static_and_relative_positioning
According to this, it makes only a difference, if there is also some positioning, as you said, and other elements around, which might then be overlapped by your relative positioned one.
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.