I am practicing HTML markup and CSS few months ago and now I'm quite understood about web design standards and layouts. I've seen many times on the source of other web layouts which they use position relative on their main Wrapper or Container div.. I want to know the purpose of utilizing this because there is no any physical/visual change appear on that wrapper div.. so what is the purpose behind?
Using position: relative; on a container is done so position: absolute; on descendants will apply to the container element, not the body.
See the position page on learnlayout.com.
http://www.w3.org/wiki/CSS/Properties/position
The relative position will tell the browser to "reserve" the space of the element in the normal document flow, and you can displace the said element in anyway without further affecting document flow (e.g. left: -50%).
Also, the relative position allows inner absolutely positioned children to be position relatively to this element. E.g., if the child element has an absolute position of top: 50px, it will be positioned relatively from the top border of the parent element (who is relatively positioned) by 50px, instead of from the <body> element.
Related
This question already has answers here:
Difference between static and relative positioning
(7 answers)
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 3 years ago.
Following this link.
It states:
An element with position: relative; is positioned relative to its normal position.
How can we define 'normal position'? Is it in context of parent element or overall screen(viewport)?
"Normal position" is in the context of the DOM, and refers to Normal flow:
First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.
By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.
This is explained in further detail in the CSS flow layout:
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
It's worth noting that all elements have static positioning by default:
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."
And relative positioning simply allows for modification of the position:
This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.
Normal Position is the actual position of the element in DOM. If you remove the left property for the div in below example then it will be shifted back to its normal position.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
Hope it helps.!
The normal position refers to the initial position of certain element within the viewport.
You can relatively move (top, right, bottom and left) an object if this object has position: relative set and it will move depending on the starting position of this same element.
Also, let's say you have a parent div with a position set to relative; then. inside of it you have another div with the position set to absolute. This second element will 'absolutely' move in its parent context/size which is the div with the relative position.
Take a look at this link so you have some extra idea of how it works.
I know it seems kinda weird at first but you can easily get it with practice.
Relative means it is relative to the content on the page. If it's in a row with inline set, it is relative to the one beside it - meaning it will be positioned next to it, relative to where a div without any position would normally go.
So if there is nothing on the page, it will flow the same as all other content, and position to the top left by default.
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
In the example here, I notice if you take away the margin-left:200px from the first section element, it expands its width to fully match the container, but it doesn't go below the nav element, which is has position:absolute. Instead, it's overlaid by the nav element, as if it got a lower z-index. Why is that? Aren't both these elements in the flow of the document? So that means they should come one right after the other right, with the section element appearing under the nav element (this happens when I remove the position:absolute)? Why are they overlaid each other instead?
Aren't both these elements in the flow of the document?
Nope! position: absolute; specifically removes elements from the flow.
As referenced in this answer, absolute positioning uses current positioning context. An element with position: absolute; is still affected by its parent, however it is completely independent of its siblings.
I am trying to make an HTML DOM slideshow creator, that inserts text, images, etc. into slides for presentations. The main browsers in mind are the Nintendo DSi and 3DS browsers, but I would like functionality with computers as well, meaning that I AM using CSS percentages.
But here's the catch: An HTML span element has a relative positioning of top 100% and left:90%.
The left position is fine--the top position is not...I don't understand why, but the span is being displayed COMPLETELY outside the element from the top positioning.
Check this out for yourself here.
"Slide 1" is supposed to be ABOVE the bottom border for the light gray div I have. Why is this outside when the positioning should be relative to that div?
I've always been so confused with CSS positioning...Could someone please figure this out for me? This is getting frustrating. By the way, what your looking for is "Slide 1" outside the HTML div.
It is "being displayed COMPLETELY outside the element" precisely because of the top: 100%. That is telling it to move the span 100% the height of the container, which of course since it started at the top of the container, it puts it just past the bottom of the container. Note that relative positioning is not done "relative to that div" as you stated, it is actually relative to that span (you may want to do some reading on that). However, when using percentage offsets, it does calculate its offsets in relation to the size of the container.
Since your div.slide container is itself position:relative, then I believe what you want is to set your span to position:absolute and instead of doing a top positioning, do a bottom: 0 which will place it directly on the bottom of the div you are trying to place it on the bottom of. You can keep your left: 90%.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?