CSS上下左右属性如何工作？

Question

I was wondering what the logic was behind the CSS attributes for top , left bottom and right .

for example if i was to do the following:

img {
    position:absolute;
    right:5px;
}

this would set the right edge of the image 5px to the left of the right edge of its containing element.

which i understand fine and the syntax makes sense, however where i'm slightly confused is if i was to set it like this:

img {
    position:absolute;
    right:0px;
}

It should set the right edge of the image to the left of the right edge of its containing element, but the syntax seems odd to me, that i have to specify right:0px; .

I was just curious as to why it works this way, and is not in a similar format to float:right; or position:right;

Answer 1

The float properties are relative to other elements in your document. The top , right , left, and bottom properties are relative to the edge of that element . They add margin of that amount to the specified side of the element.

float: left; says "I'm going to float to the left of other elements next to me.

right: 5px; says "The closest element has to be 5px away from me when on the right side.

It's a matter of selflessness vs. selfishness. See the W3C Wiki for more information.

Also, keep in mind that top , right , left , and bottom properties only work when position is set.

Answer 2

Well, you need to understand the concept of positioning for this. Let us try to understand this. Consider you have the following structure:

HTML:

<div id = "divContainer">
    <div id = "divElement"></div>
</div>

CSS:

#divContainer {
    height:300px;
    position:relative;
    width:300px;
    background-color:Red;
}

#divElement {
    height:150px;
    position:absolute;
    width:150px;
    background-color: Orange;
    right:0px;
}

See this here: http://jsfiddle.net/3mQk2/

As you can see, the divElement sticks to the right end corner of the divContainer. This is because position:absolute takes the element out of the normal 'flow of the document'. This in itself does not move the element (remove the right:0; and see). When you provide the right:0 value it understands 'make the distance between the current element (divElement) and its container 0px on the inside right side of the container'.

This also happens because the container has position:relative attached to it. If instead, the position property of the container was set to static (which is the default by the way) in this manner:

#divContainer {
    height:300px;
    position:static;
    width:300px;
    background-color:Red;
}

Then divElement's container would have been the window element and not the divContainer(yes, this is a aha!moment to many). In that case, the divElement would have 'stuck' to the corner of its container (ie the window).

You can see this here: http://jsfiddle.net/35qc2/

Hope this helps.

EDIT: i know what it does, i was more wondering why the syntax of right:0, i know that position:right; doesn't exist but it would make more sense syntactically than right:0px.

This is the comment you have made above. Let us try to break this down and examine it.

"I know that position:right; doesn't exist"

Yes, you are right. position:right does not exist.

But it would make more sense syntactically than right:0px.

Nope. It wouldn't. For this, you have to understand the fundamental responsibility of the properties. ie:

position property : HOW the element is to be positioned.

top, right, bottom, left : WHERE the element is to be positioned.

That is these properties (top, right, bottom, left) are dependent on the position property.

That's why these properties have no effect when the position property is set to static. They only come into picture when the position is NOT static.

Answer 3

top, right, left, and right; refer to specific coordinates in the screen (or container) whereas float:right, and float:left respect the padding the container may have set previously.

For instabnce in the DEMO I include here. You will see that both elements are inside the same wrapper. The float is restrained to the wrapper width and padding. The other element is following specific instructions to be located where I want it. In this case 100px down from the top and 0px from the right (of the screen)

There is a misconception where some developers think it follows the top-left coordinate of the screen as (0,0). Not exactly. As far as position absolute goes every edge is a 0. So when you say left:10px. It means 10px towards the center of the screen. Same for right:0px. It means 10px towards the center of the screen from the right edge.