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
Post a Comment