CSS8. 定位 - absolute
描述
绝对定位会把元素拿出文档流，不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先，也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素"html"进行定位。HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77808KB, 提交时间: 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 .outer,.middle,.inner{\n padding-left:10px;\n }\n .outer {\n width: 100px;\n height: 100px;\n background-color:skyblue;\n }\n .middle {\n width: 100px;\n height: 100px;\n background-color:yellowgreen;\n position: absolute;\n }\n .inner {\n width: 100px;\n height: 100px;\n background-color: pink;\n position: absolute;\n left: 0;\n }\n </style>\n </head>\n <body>\n \t<div class=\"outer\">\n <div class=\"middle\">\n <div class=\"inner\">\n \n </div>\n </div>\n </div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77836KB, 提交时间: 2022-01-22
{"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 .outer {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:red;\n position:absolute;\n left:0px;\n }\n .middle {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:black;\n position:absolute;\n left:0px;\n }\n .inner {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:green;\n position:absolute;\n left:0px;\n }\n </style>\n </head>\n <body>\n \t<div class=\"outer\">\n <div class=\"middle\">\n <div class=\"inner\">\n \n </div>\n </div>\n </div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1743ms, 内存消耗: 77888KB, 提交时间: 2022-01-22
{"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 .outer {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:red;\n }\n .middle {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:orange;\n position:absolute;\n }\n .inner {\n width: 100px;\n height: 100px;\n padding-left:10px;\n background-color:yellow;\n position:absolute;\n left:0px;\n }\n </style>\n </head>\n <body>\n \t<div class=\"outer\">\n <div class=\"middle\">\n <div class=\"inner\">\n \n </div>\n </div>\n </div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77764KB, 提交时间: 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 .outer {\n width: 100px;\n height: 100px;\n background-color:red;\n padding-left:10px;\n }\n .middle {\n width: 100px;\n height: 100px;\n background-color:blue;\n padding-left:10px;\n position:absolute;\n }\n .inner {\n width: 100px;\n height: 100px;\n background-color:yellow;\n padding-left:10px;\n position:absolute;\n left:0px;\n }\n </style>\n </head>\n <body>\n \t<div class=\"outer\">\n <div class=\"middle\">\n <div class=\"inner\">\n \n </div>\n </div>\n </div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77840KB, 提交时间: 2022-01-27
{"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 .outer {\n width: 100px;\n height: 100px;\n padding-left: 10px;\n background: black;\n }\n .middle {\n width: 100px;\n height: 100px;\n padding-left: 10px;\n background: red;\n position: absolute;\n }\n .inner {\n width: 100px;\n height: 100px;\n padding-left: 10px;\n background: blue;\n position: absolute;\n left: 0px;\n }\n </style>\n </head>\n <body>\n \t<div class=\"outer\">\n <div class=\"middle\">\n <div class=\"inner\">\n \n </div>\n </div>\n </div>\n </body>\n</html>","libs":[]}