<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d0{ width:100%; #宽度占屏幕的百分比 position: fixed; #设置方位的类型。fixed为相对屏幕的绝对位置;absolute为在整个网页中的相对位置;relative,相对其他标签的位置。
top:0px; left:0px; background-color: black; height:35px; z-index:1; #一个div块类似一图层,有优先显示的顺序。彼此会相对覆盖遮挡。 } #d1{ position:absolute; float:right; #和 left:__px,不一样的设置,直接将div块设置为在页面的左边或者右边 top:35px; background: pink; width:17%; height:900px; } #d2{ position: absolute; background-color:deepskyblue; top:35px; left:17%; width:83%; height:900px; } </style> </head> <body> <div id="d0"></div> <div id="d1"></div> <div id="d2"></div> #每个div都类似一图层,不使用z-index命令设置话,默认按最后一个div最优先显示,覆盖其他div界面 </body> </body> </html>
————————————————————————————————————————————————————————————————————
效果图: