css - What are the default top, left, botton or right values when position:absolute is used? -

-

in big project, few buttons misalligned in ie. found fix coincidence, setting position: absolute without parameters. made me wonder, default values of such position? understand how absolute positioning works , containing element means. don't know default values come from. not top:0; left:0 expected.

<!doctype html> <html> <head> <style> h1 { position:absolute; } </style> </head>  <body> <h1>absoulute pos</h1> <p>paragraph</p> </body>  </html>

here simple page, , how final positioning of h1 element looks like:

enter image description here

as suspect, initial values these properties not 0; auto. can find property definitions in section 9.3.2 of spec.

when absolutely positioned box keeps offsets auto (i.e. don't modify them), doesn't go anywhere. remains in static position, means usual spot in layout had not been positioned @ all. section 10 has all details (it has entire paragraphs explaining "static position" means), you'll want focus on 10.3.7:

the constraint determines used values these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

if 3 of 'left', 'width', , 'right' 'auto': first set 'auto' values 'margin-left' , 'margin-right' 0. then, if 'direction' property of element establishing static-position containing block 'ltr' set 'left' static position , apply rule number 3 below; otherwise, set 'right' static position , apply rule number 1 below.

[...]

1. 'left' , 'width' 'auto' , 'right' not 'auto', width shrink-to-fit. solve 'left'

and 10.6.4:

for absolutely positioned elements, used values of vertical dimensions must satisfy constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

if 3 of 'top', 'height', , 'bottom' auto, set 'top' static position , apply rule number 3 below.

[...]

3. 'height' , 'bottom' 'auto' , 'top' not 'auto', height based on content per 10.6.7, set 'auto' values 'margin-top' , 'margin-bottom' 0, , solve 'bottom'


Comments

Post a Comment

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that? ...
Read more

routes - Laravel 4 Wildcard Routing to Different Controllers -

-
realizing i'm going take beating this, have several questions "best practices" when constructing laravel route. do laravel routes run "first come first serve" top bottom? if route found, pass control controller (or perform action) , terminate? i have part of application acts url shortner. so, route looks this: route::get('/{id}', array('as' => 'home.text', 'uses' => 'homecontroller@text'), function($id){ //make sure id exists before pushing controller. if (storage::where('shortcode','=', $id)->count() > 0) { // route found } }); how can improved? one, i'm not sure how pass processing on controller conditionally.. sort of controller::make() ..? 3) there better way in laravel check if record exists versus doing mode::where('column','=','value')->count() 4) have legacy urls http://url.com/?...
Read more

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -

-
i transforming xhtml xhtml, need xslt stylesheet part of resulting document (the stylesheet contained in <script type"text/template"> element. using the xsl:namespace-alias instruction, works fine in ie, fails in both chrome , firefox. here relevant code: <xsl:output doctype-system="about:legacy-compat" omit-xml-declaration="yes" indent="yes" method="html" media-type="application/xhml" encoding="utf-8"/> <xsl:namespace-alias stylesheet-prefix="wxsl" result-prefix="xsl" /> <xsl:template match="head"> <!-- code omitted clarity --> <script type="text/template"> <wxsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:eli="local"> ...
Read more