Positioning


#1


https://www.codecademy.com/en/courses/web-beginner-en-6merh/3/2?curriculum_id=50579fb998b470000202dc8b


There is told in this lesson:

If #outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.

But it doesn't work. Anyway the #inner box stands relatively to the #outer despite to changing position type for both divs - NOTHING CHANGES. #inner is watching ONLY #outer position. Not entire document or html tag or smth.

This also concerns next lesson 19. Relative position. There is also changing of position type don't affect anything. #inner moves inside #outer in any case.

Please clarify this situation.

THANK YOU!


div {
	height: 100px;
	width: 100px;
	border-radius: 5px;
	border: 2px solid black;
}

#inner {
	height: 75px;
	width: 75px;
	background-color: #547980;
    position: absolute;
	margin-left: 20px;
	/*Add your CSS here!*/
	
}

#outer {
	height: 1500px;
	width: 150px;
	background-color: #45ADA8;
	margin-left: 120px;
	position: static;

}


#2

EDIT:

I see what you mean by the #inner box not moving out of the #outer box. I'll be looking into this as well.


EDIT2: ABSOLUTE POSITIONING

The reason why it doesn't work like what you expected is because of the margin-left property. I believe margin property in general will not allow the #inner to ignore it's parent...which is #outer.

If you change #inner's margin-left to just left (leaving other code the same), then I believe it works the way you want it to:

#inner {
	height: 75px;
	width: 75px;
	background-color: #547980;
	/*Add your CSS here!*/
	position: absolute;
	left: 20px;
}

EDIT 3: RELATIVE POSITIONING

As for the relative positioning, I don't think it will ignore the parent even though the parent is static. relative focuses on moving the element from where it should have been. If you removed all positioning in the CSS, you'll see that the #inner box is inside the #outer box on the top-left. That means this is #inner box's initial position. So by making it relative and doing left or margin-left will move it left from its initial position.


Someone else can clarify this too. These are just the conclusions I came to when I was exploring/experimenting.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.