CSS9. 定位 - absolute - 评注
描述
绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件。比如有一篇文章，可以给文章添加一些行内的评注，最好以气泡图的样式显示在文章外部的空白区域中。HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77772KB, 提交时间: 2021-12-26
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n article {\n margin-left: 10rem;\n }\n aside {\n width: 5rem;\n padding: 1rem;\n color: white;\n background-color: pink;\n border-radius: 0.5rem;\n position:absolute;\n margin-left: -9rem\n }\n aside:after {\n content: '';\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border: 0.5rem solid pink;\n border-bottom-color: transparent;\n border-right-color: transparent;\n right: -1rem;\n top: 0.5rem;\n }\n .note {\n color: green;\n text-decoration-line: underline;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>\n <p>煮豆燃豆萁，</p>\n <p>豆在釜中泣。</p>\n <p>本是同根生，</p>\n <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>\n <p class='note'>相煎何太急？</p>\n </article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77772KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n article {\n margin-left: 10rem;\n }\n aside {\n width: 5rem;\n padding: 1rem;\n color: white;\n background-color: pink;\n border-radius: 0.5rem;\n margin-left: -9rem;\n position: absolute\n }\n aside:after {\n content: '';\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border: 0.5rem solid pink;\n border-bottom-color: transparent;\n border-right-color: transparent;\n right: -1rem;\n top: 0.5rem;\n }\n .note {\n color: green;\n text-decoration-line: underline;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>\n <p>煮豆燃豆萁，</p>\n <p>豆在釜中泣。</p>\n <p>本是同根生，</p>\n <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>\n <p class='note'>相煎何太急？</p>\n </article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77804KB, 提交时间: 2022-01-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n article {\n margin-left: 10rem;\n }\n aside {\n width: 5rem;\n padding: 1rem;\n color: white;\n background-color: pink;\n border-radius: 0.5rem;\n position: absolute;\n margin-left: -9rem;\n \n }\n aside:after {\n content: '';\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border: 0.5rem solid pink;\n border-bottom-color: transparent;\n border-right-color: transparent;\n right: -1rem;\n top: 0.5rem;\n }\n .note {\n color: green;\n text-decoration-line: underline;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>\n <p>煮豆燃豆萁，</p>\n <p>豆在釜中泣。</p>\n <p>本是同根生，</p>\n <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>\n <p class='note'>相煎何太急？</p>\n </article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77812KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n article {\n margin-left: 10rem;\n }\n aside {\n width: 5rem;\n padding: 1rem;\n color: white;\n background-color: pink;\n border-radius: 0.5rem;\n position:absolute;\n left:30px;\n margin-left:-9rem;\n }\n aside:after {\n content: '';\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border: 0.5rem solid pink;\n border-bottom-color: transparent;\n border-right-color: transparent;\n right: -1rem;\n top: 0.5rem;\n }\n .note {\n color: green;\n text-decoration-line: underline;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>\n <p>煮豆燃豆萁，</p>\n <p>豆在釜中泣。</p>\n <p>本是同根生，</p>\n <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>\n <p class='note'>相煎何太急？</p>\n </article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77820KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n article {\n margin-left: 10rem;\n }\n aside {\n width: 5rem;\n padding: 1rem;\n color: white;\n background-color: pink;\n border-radius: 0.5rem;\n position:absolute;\n left:0;\n margin-left:-9rem;\n }\n aside:after {\n content: '';\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border: 0.5rem solid pink;\n border-bottom-color: transparent;\n border-right-color: transparent;\n right: -1rem;\n top: 0.5rem;\n }\n .note {\n color: green;\n text-decoration-line: underline;\n }\n </style>\n </head>\n <body>\n \t<section>\n <article>\n <p>煮豆燃豆萁，</p>\n <p>豆在釜中泣。</p>\n <p>本是同根生，</p>\n <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>\n <p class='note'>相煎何太急？</p>\n </article>\n </section>\n </body>\n</html>","libs":[]}