网页页面布局美化能够影响用户浏览页面的体验度。通过样式表能够对网页进行布局编辑,美化网页。页面布局主要有,浮动布局 position:fixed:如广告弹窗;相对定位 position:relative:两个板块之间进行位置布局;绝对定位 position:absolute:一个板块通过整个页面进行位置定位;分层 在z轴方向分层:z-index:数值;流式布局 float:left/right。
如果将一个板块用绝对布局放置在另一个板块,那么需要将主板块做相对定位,否则绝对定位就是以整个网页为坐标。
<style> .div-relative { width: 100px; height: 100px; background-color: yellow; /*相对定位*/ position: relative; } .div-absolute {width: 50px; height: 50px; background-color: white; position: absolute; top: 19px; right: 10px; </style> <div class="div-relative"></div> <div class="div-absolute">kkk</div> <div class="div-relative"> <div class="div-absolute">kkk</div> </div>