A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

几种定位方式的区别(前端经典面试题)


问题:现在在页面上有两个盒子,其中第二个盒子将第一个盒子压住了一半。作用:解决页面上盒子与盒子之间的层叠问题。

1.static:静态的
position:static;静态定位。
所有的标准流中的元素都是静态定位。

2.relative:相对的
position:relative:相对定位。
使用的时候还要配合:top,left,right,bottom来使用。
特点:如果设置了相对定位并且设置了trbl属性,那么将来盒子会以盒子原本的位置发生偏移。

.two盒子原来的位置发生偏移,在水平方向向右移动了20像素,在垂直方向也向下移动 20个像素。
1.0相对于原来的位置进行平移。
2.0设置了相对定位的元素在页面上占据了位置(没有脱离标准流)。
总结:想当年。

3.absolute:绝对的
position:absolute//绝对定位
使用的时候也要配合trbl属性来使用
特点:
1.0如果这个元素没有父元素,那么将来trbl是相对于body来定位的
     2.0如果绝对定位的元素有父元素,但是父元素没有定位,那么这个时候trbl还是相对于body来定位的。
3.0如果绝对定位的元素有父元素,而且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础。
4.0绝对定位之后的元素在页面不会占据位置(绝对定位以后的元素会脱离标准流)。
总结:看脸型。
将来在写页面的时候用的最多的既不是绝对定位也不是相对定位,而是绝对定位与相对定位一起使用:(规范)子绝父相
子元素使用绝对定位,父元素使用相对定位。
案例:
如果小盒子在大盒子中要定位并且水平居中:
left: 50%,将小盒子在大盒子平移大盒子的一半,再设置margin-left-(小盒子宽度的一半),注意一定是负数,那么将来小盒子在大盒子中就可以水平居中了。

4.fixed:固定
position:fixed。
使用的时候也要配合trbl属性来使用
特点:
1)不管页面有多大,trbl永远是相对于浏览器的边框来的。
2)固定定位的元素也脱离了标准流(不在页面上占据位置)
总结:死心眼型。

2 个回复

正序浏览
学习了   谢谢楼主
回复 使用道具 举报
沙发
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马