css绝对定位

来源：互联网发布：网络布线报价编辑：程序博客网时间：2024/05/21 14:52

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css绝对定位</title>    <style>        #left,#center,#right{            float: left;        }        #left{            width: 200px;            height: 200px;            background-color: yellow;        }        #center{            width: 200px;            height: 200px;            background-color: #cccccc;            /*绝对定位：                会寻找离他最近的采用了定位的父元素，并以他为坐标进行定位                如果所有的父元素都没有采用定位，则以body为坐标进行定位                并且，元素占用的空间会被其他元素占用*/            position:absolute;            top: 20px;            left: 20px;        }        #right{            width: 200px;            height: 200px;            background-color: aquamarine;        }    </style></head><body><div style="border: 1px solid red"><div style="position: absolute;top: 50px;bottom: 50px;border: 1px solid red"><div>    <div id="left"></div>    <div id="center"></div>    <div id="right"></div></div></div></div></body></html>

若去除 #center中           position:absolute;            top: 20px;            left: 20px;
效果为

0 0