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

sql - VB.NET Operand type clash: date is incompatible with int error -

-
i trying display records table named staffpresentee database using clause... i using visual studio 2010... the table design follows- .......fieldname..................datatype........allownull 1......staff_id (fk).............numeric(18,0)......yes 2.......date........................date.............no 3......present.....................char(1)..........yes note type of 2nd field date , not datetime... i want display records table have today's date int 'date' field... current query is- cmd = new sqlclient.sqlcommand("select * staffpresentee date=" & date.now.date, cn) dr = cmd.executereader for dr = cmd.executereader error "operand type clash: date incompatible int" i tried select * staffpresentee query without clause runs correctly. try putting date value in sigle quotes maybe. cmd = new sqlclient.sqlcommand("select * staffpresentee date='" & _
Read more

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

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -

-
here code im = cv2.imread('luffy.jpg') gray = cv2.cvtcolor(im,cv2.color_bgr2gray) ret,thresh = cv2.threshold(gray,127,255,0) contours,h = cv2.findcontours(thresh,cv2.retr_tree,cv2.chain_approx_simple) cnt in contours: moment = cv2.moments(cnt) c_y = moment['m10']/(moment['m00']+0.01) c_x = moment['m01']/(moment['m00']+0.01) centroid_color = im[c_x,c_y] centroid_color = np.array((centroid_color[0],centroid_color[1],centroid_color[2])) print type(centroid_color) cv2.fillpoly(im,cnt,centroid_color) i getting error on last line try , pass centroid_color color argument. <type 'numpy.ndarray'> , have been able pass data type cv2.fillpoly color in other instances, not sure why having problem here. fillpoly() expects iterable, i.e. put cnt in brackets. believe duplicate of https://stackoverflow.com/a/17582850/5818240 . moreover, centroid color variable contains strings. need convert them i
Read more