• 定位布局


    什么是定位布局

    可以通过上下左右四个方位完成自身布局的布局方式。

    关键字:position(static|relative|absolute|fixed)

    在通过top|bottom|left|right 进行定位。

    注意点:当css样式中left和right共存的话采用left定位,top和bottom采用top定位。

    文档流:

    浏览器默认设置

    position:static

    相对定位:

    参考系:自身原有位置,并不会脱离文档流,原有的位置依旧占据。

    position:relative

    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.left = -right | top = -bottom
    3.布局后不影响自身原有位置
    4.不脱离文档流

    绝对定位

    参考系:最近的定位父级

    position: absolute; => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.父级必须自己设置宽高
    3.完全离文档流

    固定定位:

    参考系:整个html页面

    position: fixed; => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.相对于页面窗口是静止的
    3.完全脱离文档流

    z-index

    修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

  • 相关阅读:
    usaco-3.2-butter-passed
    usaco-3.2-msquare-pass
    usaco-3.2-ratios-pass
    usaco-3.2-spin-pass
    usaco-3.2-kimbits-pass
    usaco-3.2-fact4-pass
    usaco-3.1-stamps-pass
    usaco-3.1-contact-pass
    git操作
    spring 用到的设计模式
  • 原文地址:https://www.cnblogs.com/msj513/p/10104527.html
Copyright © 2020-2023  润新知