• 每天CSS学习之top/left/right/bottom


    top:值域是数值或百分比,正负都可以。该值表示 距离顶部有多少像素。例如top:10px;即距离顶部10个像素。

    left/right/bottom与top如出一辙,只是方向不一样而已。

    这些属性一般配合position一起使用。只有当position的值为relative、absolute或fixed时才有效。

    注意:position为relative时,标签是基于文档流的;当position为absolute时,标签会脱离文档流。fixed和absolute一样。

    1、不管父元素或祖先元素有没有设置position属性值,当前标签的position为relative时,且给left和top属性赋值后,该标签会基于直接父元素的左上角计算,不会脱离文档流,如果该标签前面有元素,则该标签会向下移动;

    2、如果某个标签的很多祖先元素设置了position为relative/absolute/fixed,再给当前标签的position设置absolute,给left和top属性赋值后,那就基于 离得最近的设置了position的那个祖先元素 的左上角计算;

    如果祖先元素都没有设置position值,则该标签就会基于整个屏幕的左上角进行计算。

    3、针对position是fixed的标签来说,始终是基于整个屏幕来计算的。

  • 相关阅读:
    nodejs启动前端项目步骤
    多线程
    数组排序(6)- 快速排序
    数组排序(5)- 归并排序
    数组排序(4)- 希尔排序
    数组排序(3)-插入排序
    数组排序(2)-选择排序
    数组排序(1)-冒泡排序
    队列-用非顺序映像实现队列
    ArrayList、Vector和LinkedList的区别
  • 原文地址:https://www.cnblogs.com/williamwsj/p/7348438.html
Copyright © 2020-2023  润新知