CODEWITHSUNDEEP
csscss-position
chandru kutty
chandru kutty

Reputation: 567

Why does the browser give priority to top and left instead of the right and bottom properties?

When I try to override an element's positional top and left properties by setting right or bottom, it is not working; the left and top properties are the browser's only concern, it seems.

Why is this? Where/how can I use the the bottom and right properties?

Upvotes: 0

Views: 2586

Answers (3)

Chris Hanson
Chris Hanson

Reputation: 731

You need to set your top: auto; left: auto to override your previous setting and have it use bottom right instead.

Upvotes: 1

Barney
Barney

Reputation: 16466

If there's no specified height or width, and the element in question has position absolute or fixed, then specifying both a top and bottom (or left and right) actually means something — you might want a lightbox to be 20 pixels from each edge of the body for example, and occupy all the remaining space.

However with relative positioning, or when other specified dimensions make the calculation impossible, then specifying distances from both edges will result in a conflict of instruction, so the browser is forced to take one over the other. top and left are the natural precedence for layout (and text in Western script), so they're taken arbitrarily.

You can however reset top and left by specifying the auto value, allowing your bottom and right to take precedence:

/* previous rules */
.thing {
    top: 20px;
    left: 20px;
}

/* your rule */
.thing {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
}

Upvotes: 5

Mr. Alien
Mr. Alien

Reputation: 157394

I try to override an element style position top and left by setting right or bottom

Firstly you cannot override top and left properties using right and bottom

If you want to override them you need to set the values like

element.class {
   top: [auto, inherit, px, %];
   left: [auto, inherit, px, %];
}

/* Don't leave them blank */

Now am coming to the second question here.

never see people use right and bottom properties where can I use the those properties efficiently

Take an example where you need a button positioned to the right and bottom of the container element and the element height and width are dynamic, so in this case you need to use right: 0; and bottom: 0; as you cannot position the element from left and top, as you don't know how much px you need to take the element from left or from top as the element size is dynamic.

Upvotes: 3

Related Questions