迷惑的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. 在Intellij IDEA中添加JUnit单元测试

    Intellij IDEA中添加JUnit单元测试 目录 Intellij IDEA中添加JUnit单元测试 下载jar包 在Intellij IDEA项目中添加jar包 下载插件并进行设置 创建存放 ...

  2. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html

  3. C#控制台窗口禁用关闭按钮

    1 public class Program 2 { 3 #region 禁用控制台黑窗口的关闭按钮 part1 4 5 private const int MF_BYCOMMAND = 0x0000 ...

  4. MATLAB神经网络应用设计【2】

    一.深度学习中经常看到epoch. iteration和batchsize,下面按自己的理解说说这三个的区别: (1)batchsize:批大小.在深度学习中,一般采用SGD训练,即每次训练在训练集中 ...

  5. jq 简易购物车功能实现

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. async-validator 源码学习笔记(三):rule

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 rule 主要实现的是校验规则,文件结构为下图: 一.rul ...

  7. PF4J使用

    PF4J是一个Java轻量级的插件框架,可以实现动态加载,执行,卸载外部插件(支持jar以及zip),具体可以看官网:https://pf4j.org/. 本文例子基于Github地址:https:/ ...

  8. 4.监控Redis--单节点

    prometheus监控redis需要用到redis_exporter. redis_exporter 项目地址:https://github.com/oliver006/redis_exporter ...

  9. 使用systemd-analyze 工具来分析各个服务进程的启动性能

    systemd-analyze是一个分析启动性能的工具,用于分析启动时服务时间消耗.默认显示启动是内核和用户空间的消耗时间:使用systemd-analyze plot > boot.svg生成 ...

  10. CVE-2017-7269(IIS远程代码执行)

    利用CVE-2017-7269让IIS向自己的msf反弹一个shell 漏洞编号:CVE2017-7269 服务器版本:Windows server 2003 中间件:IIS6.0 攻击工具:meta ...