相对定位和绝对定位以及固定定位

来源：互联网发布：无数据库论坛源码编辑：程序博客网时间：2024/06/05 02:42
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #left,#center,#right{            float: left;        }        #left{            width: 200px;            height: 200px;            background-color: #ea2000;            z-index: -2;        }        #center{            width: 200px;            height: 200px;            background-color: #ff7300;            position: relative;  /*position: relative相对定位 占用空间不会给别人*/            top: 20px;            left: 50px;            z-index: -1;        }        #right{             width: 200px;             height: 200px;            background-color: aqua;         }        #other{            width: 300px;            height: 300px;            background-color: #0D0000;        }    </style>    <title>在css中的定位 相对定位</title></head><body><!--           采用相对定位的元素 ： 会相对与他的位置进行定位           并且，元素原始占用 的空间不会被其他的元素占用--><!--采用绝对定位的元素：会寻找离他最近的采用了定位的父元素，并以他为坐标进行定位        如果所有的父元素都没有使用定位，则以body为坐标进行定位        并且，元素占用的空间会被其他的元素占用--><div>    <div style="position: relative;top: 100px ;left: 100px">        <div>            <div id="left"></div>            <div id="center"></div>            <div id="right"></div>        </div>    </div>    <div id="other"></div></div></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #back{            width: 100px;            height: 100px;            background-color: yellow;            text-align: center;            line-height: 100px;            position: fixed;            bottom: 20px;            right: 20px;            z-index: 1000;        }    </style>    <title>固定定位</title></head><body><div style="height: 1000px">    <div id="back">返回页面顶部 </div></div></body></html>
0 0