在CSS设计中,布局和排版是十分重要的,而定位就是其中不可或缺的一部分。CSS有三种定位方式,分别是相对定位、绝对定位和固定定位。首先,相对定位使用的是相对于元素自身原本的位置进行定位,即通过top,
在CSS设计中,布局和排版是十分重要的,而定位就是其中不可或缺的一部分。CSS有三种定位方式,分别是相对定位、绝对定位和固定定位。
首先,相对定位使用的是相对于元素自身原本的位置进行定位,即通过top,bottom,left和right属性来进行微调。相对定位使用的是相对于元素原本的位置进行调整,所以元素在文档流中仍然占有位置,在页面中相对于原本位置的基础上进行微调,通过设置起始点的位置,然后调节距离来达到对位置的调整。下面是相对定位的代码:
.box-relative { position: relative; top: 50px; left: 20px; }
接着是绝对定位,绝对定位是将元素"摘"出文档流,利用top,bottom,left,right四个属性相对于父元素进行定位,若没有明确指定父元素,则相对于最外层的body元素定位。绝对定位的元素不会对文档流产生任何影响,也就是说,其他元素不会因为绝对定位的元素而发生位置上变化。下面是绝对定位的代码:
.box-absolute { position: absolute; top: 100px; left: 100px; }
最后是固定定位,固定定位类似于绝对定位,同样也会将元素"摘"出文档流,但是固定定位是相对于浏览器窗口进行定位。固定定位的元素总是在同一位置,无论滚动条怎么滚动。下面是固定定位的代码:
.box-fixed { position: fixed; top: 20px; right: 20px; }
以上就是三种定位方式的区别,但是需要注意的是,在使用定位时还要考虑到元素的层叠关系(z-index属性),因为在同一位置的元素会按照其z-index值的大小决定覆盖关系。
粉丝
0
关注
0
收藏
0