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


i encounter error while positioning element. browsers calculate positions of elements looking @ top-left corner.

lets point (top-left corner) "basis" (sorry terminology) when using alignment or center object, works fine. if, change element's position other attributes, lets width:%50 , height:%50, browser not move element middle, moves "basis" of element middle.

is there way change "basis" other location of element? example, can make "basis" of element right-bottom corner?

i think see you're trying ask. in short answer no. if use absolute positioning, , take @ 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 div.absolute positioned based on it's bottom right corner. absolute positioning can used in way. see fiddle here: http://jsfiddle.net/3rqss/

otherwise, need use combination of absolute positioning , margins center things. e.g.

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

Comments

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -