You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ]
@@ -541,27 +541,6 @@ Where
541
541
[ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
542
542
[ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]]</pre>
543
543
544
-
<dl>
545
-
<dd>
546
-
<b><position></b> = [
547
-
<br>
548
-
[ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ]
549
-
<br>
550
-
|
551
-
<br>
552
-
[ left | center | right | <var><percentage></var> | <var><length></var> ]
553
-
<br>
554
-
[ top | center | bottom | <var><percentage></var> | <var><length></var> ]
555
-
<br>
556
-
|
557
-
<br>
558
-
[ center | [ left | right ][ <var><percentage></var> | <var><length></var> ]? ] &&
559
-
<br>
560
-
[ center | [ top | bottom ][ <var><percentage></var> | <var><length></var> ]? ]
561
-
<br>
562
-
]
563
-
</dd>
564
-
</dl>
565
544
566
545
Values are defined as follows:
567
546
@@ -572,57 +551,57 @@ Where
572
551
</dd>
573
552
</dl>
574
553
575
-
<dl>
576
-
<dt><var><length></var></dt>
577
-
<dd>
578
-
A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the containing block.
579
-
</dd>
580
-
</dl>
554
+
<dl>
555
+
<dt><var><length></var></dt>
556
+
<dd>
557
+
A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the containing block.
558
+
</dd>
559
+
</dl>
581
560
582
-
<dl>
583
-
<dt><var>top</var></dt>
584
-
<dd>
585
-
Computes to 0% for the vertical position.
586
-
</dd>
587
-
</dl>
561
+
<dl>
562
+
<dt><var>top</var></dt>
563
+
<dd>
564
+
Computes to 0% for the vertical position.
565
+
</dd>
566
+
</dl>
588
567
589
-
<dl>
590
-
<dt><var>right</var></dt>
591
-
<dd>
592
-
Computes to 100% for the horizontal position.
593
-
</dd>
594
-
</dl>
568
+
<dl>
569
+
<dt><var>right</var></dt>
570
+
<dd>
571
+
Computes to 100% for the horizontal position.
572
+
</dd>
573
+
</dl>
595
574
596
-
<dl>
597
-
<dt><var>bottom</var></dt>
598
-
<dd>
599
-
Computes to 100% for the vertical position.
600
-
</dd>
601
-
</dl>
575
+
<dl>
576
+
<dt><var>bottom</var></dt>
577
+
<dd>
578
+
Computes to 100% for the vertical position.
579
+
</dd>
580
+
</dl>
602
581
603
-
<dl>
604
-
<dt><var>left</var></dt>
605
-
<dd>
606
-
Computes to 0% for the horizontal position.
607
-
</dd>
608
-
</dl>
582
+
<dl>
583
+
<dt><var>left</var></dt>
584
+
<dd>
585
+
Computes to 0% for the horizontal position.
586
+
</dd>
587
+
</dl>
609
588
610
-
<dl>
611
-
<dt><var>center</var></dt>
612
-
<dd>
613
-
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
614
-
</dd>
615
-
</dl>
589
+
<dl>
590
+
<dt><var>center</var></dt>
591
+
<dd>
592
+
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
593
+
</dd>
594
+
</dl>
616
595
617
-
<dl>
618
-
<dt><var>auto</var></dt>
619
-
<dd>
620
-
Computes to <var>center</var> if 'polar-origin' is used in polar coordinates. But it computes as the box model layout in Cartesian coordinates.
621
-
<br>
622
-
In polar coordinates, there are many use cases specifying the position of the origin at the center point of the containing block. Therefore an element is positioned to the horizontally and vertically center in the area of the containing block when auto value is given to the 'polar-origin'.
623
-
But if it is used in conventional coordinate system, the origin of coordinate system is at the upper left corner of the containing block by default. For example, 'top' and 'left' are used for positioning the element, auto value makes the same result of giving 'top left' as the value of 'polar-origin'.
624
-
</dd>
625
-
</dl>
596
+
<dl>
597
+
<dt><var>auto</var></dt>
598
+
<dd>
599
+
Computes to <var>center</var> if 'polar-origin' is used in polar coordinates. But it computes as the box model layout in Cartesian coordinates.
600
+
<br>
601
+
In polar coordinates, there are many use cases specifying the position of the origin at the center point of the containing block. Therefore an element is positioned to the horizontally and vertically center in the area of the containing block when auto value is given to the 'polar-origin'.
602
+
But if it is used in conventional coordinate system, the origin of coordinate system is at the upper left corner of the containing block by default. For example, 'top' and 'left' are used for positioning the element, auto value makes the same result of giving 'top left' as the value of 'polar-origin'.
<dd> Computes to <var>center</var> if <aclass="property" data-link-type="propdesc" href="#propdef-polar-origin">polar-origin</a> is used in polar coordinates. But it computes as the box model layout in Cartesian coordinates. <br> In polar coordinates, there are many use cases specifying the position of the origin at the center point of the containing block. Therefore an element is positioned to the horizontally and vertically center in the area of the containing block when auto value is given to the <aclass="property" data-link-type="propdesc" href="#propdef-polar-origin">polar-origin</a>.
683
-
But if it is used in conventional coordinate system, the origin of coordinate system is at the upper left corner of the containing block by default. For example, <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top">top</a> and <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left">left</a> are used for positioning the element, auto value makes the same result of giving 'top left' as the value of <aclass="property" data-link-type="propdesc" href="#propdef-polar-origin">polar-origin</a>.
680
+
But if it is used in conventional coordinate system, the origin of coordinate system is at the upper left corner of the containing block by default. For example, <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top">top</a> and <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left">left</a> are used for positioning the element, auto value makes the same result of giving 'top left' as the value of <aclass="property" data-link-type="propdesc" href="#propdef-polar-origin">polar-origin</a>.
0 commit comments