CSS11. 定位 - relative
描述
相对定位的元素仍然会待在原来的地方，即不会从流中出来。此后可以通过"top"、"right"、"bottom"和"left"属性使元素相对于初始位置进行移动。现在给类名为"center"的盒子设置相对定位属性"position: relative"、设置"left: 50px"、设置"top: 50px"，再自定义背景颜色以便于观察。此时可以观察到中间盒子在原始的位置上向右、向下均移动了50px的距离，并且保留了原来的空间。HTML/CSS/JavaScript 解法, 执行用时: 1690ms, 内存消耗: 77792KB, 提交时间: 2022-02-07
{"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 .left {\n width: 100px;\n height: 100px;\n background-color: pink;\n }\n .center {\n position: relative;\n left: 50px;\n top: 50px;\n width: 100px;\n height: 100px;\n background-color: skyblue;\n }\n .right {\n width: 100px;\n height: 100px;\n background-color: orange;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77804KB, 提交时间: 2022-01-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 .left {\n width: 100px;\n height: 100px;\n background-color: red;\n }\n .center {\n width: 100px;\n height: 100px;\n position: relative;\n left: 50px;\n top: 50px;\n background-color: red;\n }\n .right {\n width: 100px;\n height: 100px;\n background-color: red;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77772KB, 提交时间: 2021-12-31
{"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 .left {\n width: 100px;\n height: 100px;\n }\n .center {\n width: 100px;\n height: 100px;\n position:relative;\n background:red;\n left:50px;\n top:50px;\n }\n .right {\n width: 100px;\n height: 100px;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77776KB, 提交时间: 2021-12-23
{"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 .left {\n width: 100px;\n height: 100px;\n background:green\n }\n .center {\n width: 100px;\n height: 100px;\n position:relative;\n left:50px;\n top:50px;\n background:red;\n }\n .right {\n width: 100px;\n height: 100px;\n background:pink;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77900KB, 提交时间: 2022-01-05
{"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 .left {\n width: 100px;\n height: 100px;\n background-color:red;\n }\n .center {\n width: 100px;\n height: 100px;\n background-color:yellow;\n position:relative;\n left:50px;\n top:50px;\n }\n .right {\n width: 100px;\n height: 100px;\n background-color:blue;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}