逆战班技术汇总(二)

逆战班技术汇总(二)
定位(相对定位/绝对定位):
通俗的说就是设置元素在页面中的位置,他是可以实现元素之间的层叠关系的。HTML5中常见的定位属性有以下几点:
1.position:static;(默认值,没有定位)
2.position:relative;(相对定位:相对于当前元素自身进行偏移,不能独立存在。不使元素脱离文档流,空间继续保留,如果没有定义偏移值,那么对元素本身没有影响。)
例:初始设置绿色块位于红色块水平居中;
HTML5小白分享(二)
HTML5小白分享(二)
当我们想自定义绿色块的位置:向下走100px,向右走50px;
HTML5小白分享(二)
注意看定义的属性偏移值,它是跟绿色块位移的方向是相反的(或者是可以写成top:100px;right:50px;),因为是以自身为参照物,所以位移的属性值可以是负数。
3.position:absolute;(绝对定位:默认下是以可是窗口页面进行定位,使元素脱离文档流,但是如果定义祖先元素(position:relative;),那么就是相对于祖先元素进行偏移)
还是以上面为例子,让绿色块相对于红色块进行偏移。
HTML5小白分享(二)
由此可见绿色块是完全相对于红色块向下偏移了100px,向右偏移了50px
前提是绿色块是包含在红色块内的,红色块相当于就是绿色块的祖元素,可以进行相对定位,这种相对运用的较多。

相关文章:

  • 2021-10-29
  • 2022-12-23
  • 2021-11-18
  • 2021-05-05
  • 2022-01-12
  • 2021-09-26
  • 2021-10-19
  • 2021-07-04
猜你喜欢
  • 2021-07-24
  • 2021-07-05
  • 2021-08-08
  • 2021-08-12
  • 2021-08-29
  • 2022-12-23
  • 2021-06-17
相关资源
相似解决方案