element positioning. changing the base point (top-left corner) while positioning (not transform)

Question

I encounter an error while positioning an element. Browsers calculate the positions of the elements by looking at their top-left corner.

Lets say that point (top-left corner) "basis" (sorry about the terminology) When i am using alignment or center object, it works fine. But if, i change an element's position with other attributes, lets say width:%50 and height:%50, browser does not move the element to the middle, it moves the "basis" of the element to the middle.

Is there way to change this "basis" to an other location of the element? For example, can i make the "basis" of the element right-bottom corner?

Answer 1

I think I see what you're trying to ask. In short the answer is no. However if you use absolute positioning, and take a look at this quick test:

HTML

<div class="wrap">
  <div class="absolute">
  </div>
</div>

CSS

.wrap { 
    position: relative;
    width:400px; height:400px;
    background: red; }

.absolute {
    position: absolute;
    bottom:0; right:0;
    width:100px; height:100px;
    background: blue; }

You should see that div.absolute is positioned based on it's bottom right corner. Absolute positioning can be used in this way. See the fiddle here: http://jsfiddle.net/3RqSS/

Otherwise, you need to use a combination of absolute positioning and margins to center things. E.g.

.absolute {
        position: absolute;
        top:50%; left:50%;
        width:100px; height:100px;
        margin-left: -50px;
        margin-top: -50px;
        background: blue; }