专栏首页Android开发与分享【前端】CSS : position

【前端】CSS : position

介绍

属性指定了元素的定位类型

基本属性

  • static : 默认值。没有定位,元素出现在正常的流中
  • relative : 相对定位
  • fixed : 固定定位
  • absolute : 绝对定位
  • sticky : 粘性定位

用法

static

正常的布局行为,即元素在文档常规流中当前的布局位置。此时top, right, bottom, leftz-index 属性无效。

.box {
    display: inline-block;
    height: 100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #F19EC4;
    border-radius: 8px;
    color: #FFFFFF;
}
.position-static {
    position: static;
    background-color: #7FD0F3;
}
<div class="box">1</div>
<div class="box position-static">2</div>
<div class="box">3</div>

效果

static

relative

相对定位 元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置。 position:relativetable-*-group, table-row, table-column, table-cell, table-caption 元素无效

.position-relative {
    position: relative;
    background-color: #7FD0F3;
    top: 20px;
    left: 20px;
}
<div class="box">1</div>
<div class="box position-relative">2</div>
<div class="box">3</div>

效果:box2在原来的位置上发生了偏移

relative

fixed

固定定位 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

.position-fixed {
    position: fixed;
    background-color: #7FD0F3;
    bottom: 10px;
    left: 10px;
}
<div class="box">1</div>
<div class="box position-fixed">2</div>
<div class="box">3</div>

效果:图中box2被定位在底部靠左的位置

fixed.gif

absolute

绝对定位 不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

.position-absolute {
    position: absolute;
    background-color: #7FD0F3;
    bottom: 10px;
    left: 10px;
}
<div class="box">1</div>
<div class="box position-absolute">2</div>
<div class="box">3</div>

效果:与fixed相似,但会随着屏幕滚动

absolute.gif

sticky

粘性定位 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。光描述可能会一脸懵逼,看效果好了 须指定 top, right, bottomleft 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。 (兼容性不大好)

:多个元素使用sticky

.position-sticky {
    position: sticky;
    position: -webkit-sticky;
    background-color: #7FD0F3;
    top: 10px;
}
<div class="box">1</div>
<div class="box position-sticky">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box position-sticky">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box position-sticky">8</div>
<div class="box">9</div>
<div class="box">9</div>

效果

sticky.gif

but!在caniuse上查了下,兼容性兼容确实不好,就当学习了吧

图片来自:https://caniuse.com/#tables

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position http://zh.learnlayout.com/position.html

有错误之处,感谢指出,接收批评

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端】CSS : float

    注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

    Gavin-ZYX
  • 【前端】CSS : display

    设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中

    Gavin-ZYX
  • 【Android】APT

    Gavin-ZYX
  • vue实现城市列表选择

    最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了...

    小周sri的码农
  • 自适应表头和左侧列固定的表格

    在网站建设中,表格的出现提供了数据对比的便利以及数据查看的便利。但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看...

    无邪Z
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    祈澈菇凉
  • 原生 js 实现一个前端路由 router

    项目地址:https://github.com/biaochenxuying/route

    夜尽天明
  • Web开发---单页面应用(签到日报--技术实现)

    疫情前期,员工分布在各个地区,需要上报个人的健康状态和位置信息,于是做了一个单页面应用(当时钉钉和微信上的健康上报模板还没出现)

    MiaoGIS
  • CSS入门11-定位与覆盖

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券