迷惑的position

小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~

static

元素未定位,默认出现在普通流中,即元素从左到右,从上到下的方式布局~

HTML

  <div class="section">
<h3 class="section__title">Static - 普通流</h3>
<div class="section__boxes row text-center">
<div class="header-box col-xs-12">
header box
</div>
<div class="left-box col-xs-4">
left box
</div>
<div class="right-box col-xs-8">
right box
</div>
<div class="bottom-box col-xs-12">
bottom box
</div>
</div>
</div>

CSS

  .section {
margin-bottom: 100px;
}
.section__boxes {
font-size: 22px;
}
.header-box {
background-color: #0981B2;
height: 100px;
}
.left-box {
background-color: #FF002D;
height: 200px;
}
.right-box {
background-color: #FFF419;
height: 200px;
}
.bottom-box {
background-color: #B037B2;
height: 100px;
}

效果图

relative

相对于该元素所在普通流的位置进行定位,现在我门让left box相对于其位置向右边移动100像素

CSS

  .section--relative > .left-box {
position: relative;
left: 100px;
}

效果图

对比static和relative两个效果图,你可以看到left box确实是相对于其所在正常流位置进行定位,向右移动了100像素

absolute

相对于static定位以外的第一个父元素进行定位,即相对于第一个非处于正常流的父元素定位,现在我们将left box设置为absolute,并且向下移动1150像素

CSS

  .section--absolute > .left-box {
position: absolute;
top: 1150px;
}

效果图

由于查找left box的祖先元素中,未发现有设置非static的元素,其绝对定位是相对于根元素进行移动的。


relative和absolute对比

CSS

我们设置其父亲元素为relative,然后让其元素向下、右各移动100像素

  .section--absolute {
position: relative;
}
.section--absolute > .left-box {
position: absolute;
top: 100px;
left: 100px;
}

效果图

由于其父元素设置了relative,此时该元素是相对于其父亲进行定位的,而非根元素了~

我们再对比下relative和此时的效果图,你会发现left box的实现效果一致,但是right box却有一点不一样。这是因为当元素设置relative时,其元素依然会<mark>占据所在普通流的的位置</mark>,而absolute会<mark>脱离普通文档流</mark>,此时right box就往左边布局了。

fixed

不管浏览器内容怎么滚动等操作,都是相对于浏览器窗口进行定位,即固定位置。我门将元素固定在浏览器的顶部。

HTML

  <div class="section">
<div class="section__boxes section-fixed row text-center">
<p>fixed - 固定位置 - 相对浏览器窗口定位</p>
</div>
</div>

CSS

  .section-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #15FF44;
}
.section-fixed > p {
margin: 0;
}

效果图

你可以看到随着浏览器滚动,其元素的位置依然在浏览器窗口的顶部,未发生任何变化。

关键知识点

value description
static 默认值。没有定位,元素出现在<mark>正常的流中</mark>(忽略 top, bottom, left, right 或者 z-index 声明)。
relative 生成相对定位的元素,<mark>相对于其正常位置</mark>进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute 生成绝对定位的元素,<mark>相对于static定位以外</mark>的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,<mark>相对于浏览器窗口</mark>进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit 规定应该从<mark>父元素继承</mark> position 属性的值。

w3school

资源

在线测试

源代码

本文转载于:css 迷惑的position

css 迷惑的position的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  3. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  5. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  6. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  7. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  8. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  9. css定位 与position

    本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元 ...

随机推荐

  1. Qt:QByteArray

    0.说明 QByteArray是存储二进制byte数组. 区别于QString:QByteArray中存储的全是byte,而QString中存储的全是16 bit Unicode码.QString是在 ...

  2. WPS:添加公式后,行间距变宽的解决方法

    找到公式所属段落的样式,右键修改样式 左下角'格式'中选择'段落' 段落间距设置为0,不要勾选与文档网格对齐

  3. 微信小程序 地区选择器 和省市县三级联动 和button按钮分享

    wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...

  4. centos7 安装mysql Package: akonadi-mysql-1.9.2-4.el7.x86_64 (@anaconda)

    wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release ...

  5. exit函数和return语句

    exit函数是c语言的库函数,有一个整型的参数,代表进程终止,这个函数需<stdlib.h>头文件 在函数中写return只是代表函数终止了,不管在程序的任何位置调用exit那么进程就立即 ...

  6. 前端知识之css样式

    前端之CSS样式 css介绍 css是为html标签设置样式的 css由选择器和声明组成 声明包括属性和属性值 声明之间用分号:隔开 css注释 /注释类容/ css的几种引入方式 行内样式 不推荐使 ...

  7. 6月7日 python 复习 collections

    collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >>> ...

  8. 【论文阅读】CVPR2022: Learning from all vehicles

    Column: March 23, 2022 1:08 PM Last edited time: March 23, 2022 11:13 PM Sensor/组织: 现leaderboard第一名, ...

  9. 绕过WAF进行常见Web漏洞利用

    前言 本文以最新版安全狗为例,总结一下我个人掌握的一些绕过WAF进行常见WEB漏洞利用的方法. PS:本文仅用于技术研究与讨论,严禁用于任何非法用途,违者后果自负,作者与平台不承担任何责任 PPS:本 ...

  10. GO后端开发+VUE实列

    因为我是从java转到go,代码结构跟我之前用java的很像 在这里只浅显的实战运用,没有过多理论讲解 工作环境:IDE:Goland , Go 1.17.7 框架 Gin+Gorm ,前端VUE 这 ...