+ 2
Position CSS
Question: why the green box is not in the same position of the red box? html: <body> <div class= “box1”></div> <div class= “box2”></div> </body> CSS: .box1 { width: 100px; height: 100px; color: green; position: relative; top: 0px; left: 0px; } .box2 { width: 100px; height: 100px; color: red; position: absolute; top: 0px; left: 0px; }
21 Answers
+ 5
Gintonic Yes but its relative to itself like would be static and because when viewed like static positioned its relative to body (yellow background) so it will be relative when his position=relative.. In practice its a chain... "red" is positioned relative to itself viewd like "static" and because when it viewed like static its positioned relatively to the parent, it is positioned relatively to body (differetly by "blue" thats positioned relatively to html).... Understanded?
P.S. Sorry for my poor english, i try to explain better than i can
+ 3
Gintonic,
To start, A div tag is a newline tag. Therefore it will create a newline in the HTML document.
To position the 2 boxes at the same position you need to give an negative value to your second box to move it up, Since it is above the original position.
Second, you did not assign a background color to your boxes so it will be as default its same bg as the body when a height and width is given.
#box1 {
width:100px;
height:100px;
background-color:green;
position:relative;
}
#box2 {
width:100px;
height:100px;
background-color:red;
position:relative;
top:-100px;
}
If you need it in reverse then do not assign any top:; to the second box but assign it the first box with an positive value. Since the positive value is downwards to the page. Negative values it upwards the page.
Hope this helps👍
In additional, you can work with z-index to give a certain box a overlay to the other one(s).
https://code.sololearn.com/W566LR2rCspy/?ref=app
+ 3
Gintonic, you're welcome👍
Here is a source that should cover it
Relative and absolute attribute differences on when to use.👍
https://stackoverflow.com/questions/10426497/position-relative-vs-absolute#10426566
+ 3
That’s the explanation that i was looking for. Thank you so much! Now i understand
+ 1
KrOW why doesn’t it care while the relative does?
🌴Vincent Berger🌴 thanks for the answer. Btw i would like to understand why ut’s not the same thing for absolute and relative
+ 1
Gintonic Your relative div is relative to own position like it would be static positioned then it follow the normal flow inside the body. Absolute positioned elements, instead, are relative to nearest positioned (eg. not static) ancestor and if it dont exist to html page. In your case dont exist an positioned ancestor for your absolute element then it is relative to html page... See here for an example and play with css for understand better
https://code.sololearn.com/Wn9s7rCEtV9G/?ref=app
+ 1
Gintonic Well, now play with red (relative) div... Set to static position and you will not see any difference right? Why?
+ 1
cause it’s 0,0
+ 1
Gintonic You are welcome 👍👍👍 ... With this system you now know a few better as work relative and absolute positioning that confuse MANY users 😉
0
It can depends by browser default page style ... Just for try add
body{
margin:0;
}
and tell me if they are same position
0
yeah but just wanted to know if it something related to the position property or not
0
Its normal because body have a margin (relative to page). Now using a relative and an absolute positioned element in same parent (and without change offsets) you would have get either in same positiom BUT because body margin absolue positioned dont take cure of margin of body
0
KrOW i don’t understand yet why the 0,0 of the relative is not on the left-up corner like the absolute one
0
Gintonic You have understanded difference about relative and absolute positioning? can you explain with your words? without this you canmot undestand why they have not same position
0
KrOW absolute position depends on the nearest non static parent element.
Relative on the other hand should depend on the position that it has if it is static (so by default)
0
Gintonic OK... and that happen if absolue element have not a positionated parent in his ancestors?
0
if none of his parents has absolute or relative position
0
Gintonic Take following code (assume no other css is linked)
<body>
<div>
<div id="myDiv" style="position:absolute">
</div>
</div>
</body>
To what #myDiv is relative?
0
to body
0
Gintonic Dont... Its relative to html that you can considerate like all viewport containing the page (body)... Now run again my code and READ the css tab then try to play with html and body rules
Often have questions like this?
Learn more efficiently, for free:
Hot today
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Game development
0 Votes
Ruby programming?
3 Votes