<style> #top-image { position: absolute; top: 0; left: 0; z-index: 9999; } </style> </pre>以上是设置一张ID为"top-image"的图片到最上方的CSS代码。接下来大家来逐一解释:
position: absolute;
这句话的意思是将该图片从其父元素中移除,并相对于最近的非static定位的祖先元素(如果没有这样的祖先元素,则相对于html元素)进行定位。这就使得大家可以通过top和left属性来控制其具体位置。
top: 0;
这句话表示将该图片的上边缘与其定位的祖先元素(在本代码中为html元素)的上边缘对齐,实现将图片置于最上方的效果。
left: 0;
这句话表示将该图片的左边缘与其定位的祖先元素的左边缘对齐,让其紧贴页面左边缘。
z-index: 9999;
这句话控制了元素的层叠顺序。该值越大,元素就会越靠近前面(即离用户视角更近)。
当然,以上代码只是最基础的应用,大家还可以通过设置其他的CSS属性,如宽度和高度等,来对图片进行进一步的定制。无论如何,掌握这个技巧都不会对大家网页设计的技能产生副作用。
首页 >
css将图片设置最上方 |css搜索栏
css calc等分,css渐变背景优势,css3+盒子阴影,css怎样图片加阴影,图片在css里咋写,css图文弄两侧,css搜索栏