I learn css and i get confused between those three things.
They are all doing the same thing - moving the block to the right screen position.
Is there any spicial thing in each one?
They're not doing the same thing, they're showing the same thing, based on the code.
right: 0px;
Aligns the item on which the property is specified to the right by forcing the distance between the right and the item to zero pixels, effectively setting it 'right' (requires absolute positioning though).
float: right;
Let's the specified item 'float' to the right, but it is not being forced right. If another element is already there with the same float property, it will not overwrite that position (where solution 1 stacks).
This property listens to the parent element though, if the container of this element isn't touching the right side of document, it will not reach the right side.
See the DOM as the sea, and your element as a ship. It 'floats' with the wind (left/right) 'over' the DOM / water.
margin: auto;
Doesn't even align anything to the right. Margin auto is a trick to align stuff to the center by forcing the margin between the elements to be exactly the same (automatically).
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.
Why does CSS position: relative; use bottom to shift up, use top to shift down, left to shift right, and right to shift left?
Fiddle: click me
Am I using position: relative; incorrectly, or is this some sort of terminology I was not aware of?
The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
find out more about the position property here (w3schools)
Also, you can use negative numbers as well so to shift the element left 20px you could use:
left:-20px
It's some "terminology I was not aware of", to put it in your own words. When you specify one of those values, you're specifying how far you should move it away from that side. So, when you specify a top:10px, for example, you're saying "move it 10px away from the top". I think you just had the misunderstanding that you thought it moved towards that side, but it's not exactly how it works. And this isn't just for position:relative either, it is also the same in absolute, fixed, and whatever other position values there are
Its working properly. Please read this article http://www.webdevdoor.com/html-css/css-position-child-div-parent but please try to change position value ex 20,30,40 instead of 10
To understand this, first let's look at the position: relative property/value.
Taken straight from w3schools:
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
One way to understand this is, when you set a property like left to an element with relative positioning, the value you set is how far away from it's normal position it will be. So, setting left to have a value of 20px moves it 20px away from it's normal left position. A positive integer will move it to the right and a negative will move to the left. Fiddle
Or, better put by w3schools:
For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.
My above description is probably not vernacularly correct, but it helped me understand it in the beginning.
To put it simply it positions the element x amount of pixels from the direction specified.
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%.
I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should not be < 0 of the visible top of the browser window. Is that even possible with CSS and the better browsers?
Here is my definition of the sidebar:
div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}
Here is the element I would like to keep inside the visible part of the screen:
div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}
The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.
<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>
I think you need
position:fixed;
So the element will be positioned relatively to the window, so if you scroll it is always visible.
Demo: http://jsfiddle.net/mJubt/
Moreover, if you want to set !important to a value, use top:0!important instead of top:!important 0.
And when you have 0px you don't have to write the unit, you can use just 0.
if you use top in CSS you should make sure that the element's position is not static (default) but absolute, relative or fixed. So, top:0 in this case is not working. And if you do change the position to either of those it would behave in different ways:
if it's fixed the element would be position relative to the window
if it's relative or absolute it would be position zero pixels from the top of the closest element in the DOM with a position different than static.
If the contents of the element above #navsoc has a flexible height you can't make it respect it's position and at the same time not move on scroll.
You need Javascript to achieve that.
The first part is a bit off topic back I think it is good to know it!
Here you have the fiddle.
I'm following In Search of the Holy Grail, but am having trouble understanding what's actually going on in step 3.
To break the problem down, I disabled the margins/offsets of the "left" and "right" divs. This gives you the content at the top, and then the two other elements sitting side by side under it as I would expect [see P1].
I then gradually decreased the margin-left of the "left" div from 0px to -199px which again does what I expect [see P2].
But at -200px (the width of the left element itself), it shoots up to the top [see P3], with the left edge against the right edge of the content. I would have expected it to just keep going off the edge.
Why does it jump up? And if there's no conceptual explanation as to why, where does it describe that functionality in the spec?
Images:
P1
P2
P3
Remember that both #content and #left (as well as #right) are floated.
Due to the nature of floats, they (or their contents) may overlap. This is well described in this section of the spec, and is fairly easy to understand. If you apply negative margins to a floated element that's adjacent to another float, it will simply move to its left (similar to having a left relative offset), over its sibling.
In the section on the float property, you'll find a list of "the precise rules that govern the behavior of floats." Now, I'm not 100% familiar with the float model, but these points are what I believe to be relevant:
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.1
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
So my guess is: a margin of -200px, which is as you say the negative equivalent of the width of the #left element itself, causes it to float all the way up and to the right (rather than to the left) and to hug the edge of the #center element which itself is also floated. The right edge of both elements touch each other because of this full, equal negative margin. Consequently, as you continue to increase (or decrease?) the negative margin, you'll see that the #left element continues to move to its left.
Note that the padding applied to the #container element doesn't interact with the margins; even if you remove the padding on either side or both sides, the margins will interact in the same way.
1 Note also that there's a statement in the section on collapsing margins in the linked section of the spec, that describes the behavior of negative margins, but that is irrelevant as the margins we are concerned with here are horizontal and belong to floated elements, and so are never affected by collapsing.
you are using <h2> tag for left and right heading but in center you are using <h1> that's why you have this problem if you want to solve this problem do one thing 1 use all <h2> tag for heading and if you want to use then apply below class on
h1
{
margin-top:10px;
}