<!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>
相对定位和绝对定位以及固定定位
最新推荐文章于 2024-08-11 10:27:53 发布