How does the position element influence the element float


#1



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


I know how position:relative work, but I have a question that when #footer's position is set to relative, why the footer would go onto the other objects.

When I comment the "position: relative" , the footer would go under the other objects.

What's the difference between situation?


body {
	background-color: #b7d1c4
}

h2 {
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #acd1b2;
}

img {
	height: 170px;
	width: 170px;
	box-shadow: rgba(0,0,0,0.2) 10px 10px;

}

#navbar {
	/*Add your CSS here!*/
	position: fixed;
	left:50%;
	margin-left:-254px;
	margin-top: -10px;
}

#header {
	position: relative;
	top: -10px;
	background-color: #3c4543;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

ul {
	list-style-type: none;
	position: fixed;
	margin: -10px;
}

li {
	/*Add your CSS here!*/
	display: inline;
	border: 2px solid #000000;
	font-family: Futura, Tahoma, sans-serif;
	color: #ffffff;
	border-radius: 5px 5px;
	background-color: #cc0323;
	padding: 5px;
}

#left{
	/*Add your CSS here!*/
	float: left;
	width:45%;
}

p {
	font-family: Tahoma;
	font-size: 1em;
}

#right{
	/*Add your CSS here!*/
	float: right;
	width: 45%;
}

table {
	border: #000000 1px solid;
	background-color: #acd1b2;
	float: right;
	margin-right: 10px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

td {
	height: 75px;
	width: 75px;
}

td img {
	height: 75px;
	width: 75px;
	box-shadow: none;
}

th {
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
	color: #3c4543
}

#bottom_left{
	border-bottom-left-radius: 15px;
}

#bottom_right{
	border-bottom-right-radius: 15px;
}

#footer{

	/*clear: both;*/
	/*position: relative;*/
	bottom: -20px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 75px;
	background-color: #3c4543;
}

#button{
	border: 2px solid #000000;
	float:left;
	position: relative;
	left: 229px;
	bottom: -20px;
	border-radius: 5px;
	background-color: #cc0323;
	height: 30px;
	width: 150px;
	
}

#button p{
	position: relative;
	bottom: 10px;
	font-size: 0.8em;
	color: #acd1b2;
	text-align: center;
}

.bold{
	font-family: tahoma;
	font-weight: bold;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #ffffff;
}


#2

if the footer is position static or relative it doesn't matter. What matters is the clear: both.

Float elements are take out of flow, normally block element are positioned below each other, but because float elements are taken out of flow, so they are ignored. Unless you clear them, then go below the floating element


#3

I mean when I don't set "clear: both" and the footer code is

#footer{
position: relative;
bottom: -20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 75px;
background-color: #3c4543;
}

the result is below:

And when I change the footer to:

#footer{
bottom: -20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 75px;
background-color: #3c4543;
}

the result is below: (this forum says new users just can post one image, so I add the link)

My question is that why the footer bar has the different position(one is upper and another is lower)

Does "position: relative;" have something to do with this situation?

And thanks for your reply :slight_smile:


#4

unable to replicate problem, can i see your html code? Please copy and paste it to the forum


#5

HTML:http://chopapp.com/#gzszgj27
CSS-1:http://chopapp.com/#twymtc4t
CSS-2:http://chopapp.com/#io90rctb

Try these two css codes, and you'll know what I mean. :slight_smile:
The footer bar has different display, and I consider that it is "position:relative" have done something.
I know "relative" would keep its original space and move to different position as assigned some value.
But I can't figure out why when add "position:relative" the footer bar is upper

sorry for my lateness due to GMT+8 :slight_smile:


#6

we have completely different timezones. None of the links work?


#7

HTML:https://is.gd/UTrO44
CSS-1:https://is.gd/hBz3Vl
CSS-2:https://is.gd/wRXt37

I don't know why the sever crash, and here is the new one. :slight_smile:


#8

Hm... you would need seriously in-depth understanding to solve this problem, even more understanding then i have. Don't forget relative is rendered differently then static elements (divs are static by default), i am afraid that is best i can do.

If you want to solve this mystery there is only one place to go: w3.org, the organization which makes the web programming guidelines. this is a good starting point.


#9

Thanks. It means a lot. I'll try to figure it out :slight_smile:


#10

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