Position定位

Position定位

CSSposition属性是比较常用的元素定位方案,position常用的取值有staticrelativeabsolutefixedstickyinherit

static

static属性是HTML元素的默认值,即没有定位,遵循正常的文档流对象,对于topbottomleftrightz-index属性的设置都被忽略。 文档流,指的是盒子元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 文本流,指的是文字元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

<div class="t1">static</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t1{
        position: static;
    }
</style>

relative

relative是相对定位,元素的位置是相对其原本位置进行偏移,其不脱离文档流,对于topbottomleftrightz-index属性的设置有效,设置偏移属性后会移动相对定位元素,但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块。

<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t2{
        position: relative;
        bottom: -10px;
    }
</style>

absolute

absolute是绝对定位,元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>,通常的使用方案是在外层嵌套一层relative相对定位元素作为父元素,再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移,绝对定位完全脱离文档流与文本流,不占据文档空间,对于topbottomleftrightz-index属性的设置有效。

<div class="t3">
    <div class="t4">absolute</div>
</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t3{
        height: 300px;
        position: relative;
    }
    .t4{
        position: absolute;
        top: 100px;
    }
</style>

fixed

fixed是固定定位,元素的位置相对于浏览器窗口是固定位置,即使是窗口滚动元素也不会移动,注意在<iframe>中的元素使用fixed是相对于<iframe>进行定位的,<iframe>类似于在页面中创建了一个新的浏览器窗口,固定定位完全脱离文档流与文本流,不占据文档空间,对于topbottomleftrightz-index属性的设置有效。

<div class="t5">fixed</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t5{
        position: fixed;
        top: 300px;
    }
</style>

sticky

sticky是粘性定位,元素的位置是基于用户的滚动位置来定位,粘性定位的元素是依赖于用户的滚动,在position: relativeposition: fixed定位之间切换,在页面显示时sticky的表现类似于position: relative,而当页面滚动超出目标区域时sticky的表现类似于position: fixed,它会固定在目标位置,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位,这个特定阈值指的是toprightbottomleft其中之一,必须通过指定toprightbottomleft四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。

<div class="t6">sticky</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t6{
        position: sticky;
        top: 0;
    }
</style>

inherit

inherit是通过继承父元素的position值来进行定位。

<div class="t7">
    <div class="t8">inherit</div>
</div>
<style type="text/css">
    div{
        border: 1px solid #eee;
    }
    .t7{
        position: relative;
    }
    .t8{
        position: inherit;
        bottom: -10px;
    }
</style>

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style type="text/css">
        div{
            border: 1px solid #eee;
            margin: 5px 0;
        }
        .t1{
            position: static;
        }
        .t2{
            position: relative;
            bottom: -10px;
        }
        .t3{
            height: 300px;
            position: relative;
        }
        .t4{
            position: absolute;
            top: 100px;
        }
        .t5{
            position: fixed;
            top: 300px;
        }
        .t6{
            position: sticky;
            top: 0;
        }
        .t7{
            position: relative;
        }
        .t8{
            position: inherit;
            bottom: -10px;
        }
    </style>
</head>
<body>
    <div class="t1">static</div>
    <div class="t2">relative</div>
    <div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
    <div class="t3">
        <div class="t4">absolute</div>
    </div>
    <div class="t5">fixed</div>
    <div class="t6">sticky</div>
    <div class="t7">
        <div class="t8">inherit</div>
    </div>
    <div style="height: 1000px">让浏览器出现滚动条</div>
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.zhihu.com/question/21911352
https://www.runoob.com/css/css-positioning.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax
  • FLEX布局

    FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。

    WindrunnerMax
  • Float浮动

    CSS中float属性会使元素浮动,使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    WindrunnerMax
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • HTML5选择器

    czjwarrior
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • CSS旋转魔方

     想不想做一个3D魔方,把儿子的照片放进去,外面是你,里面是他。本人从业至今,自诩是动画机器人,苦心钻研各种动画,精通CSS3、Canvas等,不管你要做什么,...

    我不是费圆

扫码关注云+社区

领取腾讯云代金券