[css-round-display] Add issue about positioning elements in conventional coordinate system and polar coordinate system

Author: Jihye Hong

css-round-display/Overview.bs

@@ -294,6 +294,41 @@ When the 'position' property on an element is set to '<code>polar</code>', the e
 <p class="note">
 Note:  The center point of the containing block of an element indicates the origin of polar coordinate when the value of position property of the element  is '<code>polar</code>'.
 </p>
+<p class="issue">
+In conventional coordinate system used in the web, the origin is positioned in the upper left corner of a containing block. In comparison, the origin of polar coordinates  is the center point of a containing block. Therefore different methods are required to deploy and transform elements, or set margin/padding values when using polar coordinates. An example as below shows the difference between the conventional coordinates and the polar coordinates when positioning elements.
+</p>
+<div class='example'>
+The examples below show the difference between conventional coordinate system in web and polar coordinate system when positioning elements. The result of following example is Figure 6A.
+<pre>
+&lt;body>
+	&lt;div id="rect1" style="position: absolute; width: 100px; height: 100px; background-color: blue;">&lt;/div>
+	&lt;div id="rect2" style="position: absolute; width: 50px; height: 50px; background-color: green;">&lt;/div>
+&lt;/body>
+</pre>
+And another example bellow shows the result in Figure 6B.
+<pre>
+&lt;body>
+    &lt;div id="rect1" style="position: polar; width: 100px; height: 100px; background-color:     blue;">&lt;/div>
+	&lt;div id="rect2" style="position: polar; width: 50px; height: 50px; background-color: gr    een;">&lt;/div>
+&lt;/body>
+</pre>
+</div>
+
+<div style="width: 800px; text-align:center">
+	<div style="float: left; width: 400px;">
+		<img style="width: 300px" src="images/polar_positioning_a.png">
+		<p>(A) Deploying elements using the conventional coordinate system used in the web</p>
+	</div>
+	<div style="float: left; width: 400px;">
+		<img style="width: 300px" src="images/polar_positioning_b.png">
+		<p>(B) Deploying elements using polar coordinate system</p>
+	</div>
+</div>
+
+<div style="width: 800px">
+	<p class="caption">Positioning elements in conventional coordinate system and polar coordinate system</p>
+</div>
+
 <h3 id="polar-angle-property">The 'polar-angle' property</h3>
 The 'polar-angle' property specifies the angle from the Y-axis. This property is activated on condition of position: polar.
 <pre class='propdef'>