关注互联网应用及运维技术的个人博客

用CSS定位-让盒子自由移动或固定屏幕中的某个位置

定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式,边偏移决定了该元素的最终位置


定位模式

定位模式取决于元素的定位方式,它通过CSS的 position 属性来设置,其值可以分为四个:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

边偏移

边偏移就是定位的盒子移动到最终位置,有 top、bottom、left、right 4个属性。

边偏移属性示例描述
toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量,定义元素相对于其父元素右边线的距离

静态定位

静态定位是元素默认的定位方式,无定位的意思

语法:

选择器 {
    position: static;
}
  • 静态定位按照标准流摆放位置,没有边偏移
  • 静态定位在布局中很少使用

相对定位

相对定位是元素在移动位置的时候,是相对于它原来的位置来计算的

语法:

选择器 {
    position: relative;
}

相对定位的特点:

  1. 他是相对于自己原来的位置来移动的(移动的时候以自己原来的位置作为参照点)
  2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)。
  3. 相对定位最典型的应用是用来限制绝对定位

绝对定位

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的

语法:

选择器 {
    position: absolute;
}

绝对定位的特点:

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
  2. 如果祖先元素右定位(相对、绝对、固定定位),则以最近一级有定位的祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置(脱标)

子绝父相

子绝父相指的是:子级是绝对定位的话,父级则需要使用相对定位

  1. 子级绝对定位,不会占用位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
  2. 父盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子布局时,需要占有位置,因此父亲只能是相对定位

总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位

当然,子绝父相并不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到


固定定位

固定定位是元素固定与浏览器可视区的位置,主要使用场景:可以在浏览器页面滚动时元素的位置不会改变

语法:

选择器 {
    position: fixed;
}

固定定位的特点:

  1. 以浏览器的可视窗口为参考点移动元素
    • 跟父元素没有任何关系
    • 不随滚动条而滚动
  2. 固定定位不再占有原先的位置

固定定位也是脱标的,其实固定定位也可以看作时一种特殊的绝对定位


实例

  • 固定在版心右侧位置
  1. 让固定定位的盒子left: 50%,走到浏览器可视区的一半位置
  2. 让固定定位的盒子margin-left: 版心宽度的一半距离,多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了

<style>
    .a {
        width: 800px;
        height: 1400px;
        margin: 0 auto;
        background-color: pink;
    }

    .b {
        position: fixed;
        top: 50px;
        left: 50%;
        margin-left: 405px;
        width: 50px;
        height: 150px;
        background-color: red;
    }
</style>

<body>
    <div class="b"></div>
    <div class="a"></div>

</body>
  • 绝对定位的盒子居中
  1. 让固定定位的盒子left: 50%,让盒子的左侧移动到父级元素的水平中心的位置
  2. 让固定定位的盒子margin-left: 盒子宽度一半的距离,让盒子向左移动自身宽度的一半

垂直居中同理

<style>
        .a {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>

<body>
    <div class="a"></div>
</body>

粘性定位

粘性定位可以被认为时相对定位和固定定位的混合

语法:

选择器 {
    position: sticky;
    top: 10px;
}

解释:

  1. 当元素距离可视窗口顶部大于 10px 时,该元素会随着页面的滚动而滚动
  2. 当元素距离可视窗口顶部 10px 时,就会固定在该位置,不随着页面的滚动而滚动

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加 top、left、right、bottom 其中一个才有效

定位叠放次序

在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用 z-index 来控制盒子的前后顺序(z轴)

语法:

选择器 {
    z-index: 1;
}
  • 数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上
  • 如果属性相同,则按照书写顺序,后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有 z-index 属性

定位的特殊特性

  • 绝对定位和固定定位和浮动有类似的特性
    1. 行内元素添加绝对或固定定位,可以直接设置高度和宽度
    2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认的大小是内容的大小
    3. 绝对定位、固定定位的元素都不会触发外边距合并的问题
  • 绝对定位、固定定位会完全压住盒子
    1. 浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字、图片
    2. 绝对定位、固定定位会压住下面标准流的所有内容

浮动之所以不会压住文字,因为浮动产生的最初目的是为了做文字环绕效果的,文字围绕浮动元素

赞(0)
未经允许不得转载:飞天狒狒 » 用CSS定位-让盒子自由移动或固定屏幕中的某个位置

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址