css 迷惑的position

learn_shifeng 发布于2019-08-02 15:54 / 3274人阅读

摘要：相对于定位以外的第一个父元素进行定位，即相对于第一个非处于正常流的父元素定位，现在我们将设置为，并且向下移动像素。生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过以及属性进行规定。规定应该从父元素继承属性的值。

迷惑的position

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

static

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

HTML

  
    Static - 普通流
    
      
        header box
      
      
        left box
      
      
        right box
      
      
        bottom box

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时，其元素依然会占据所在普通流的的位置，而absolute会脱离普通文档流，此时right box就往左边布局了。

fixed

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

HTML

  
    
      fixed - 固定位置 - 相对浏览器窗口定位

CSS

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

效果图

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

关键知识点



value
description



static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。


relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。


absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


inherit
规定应该从父元素继承 position 属性的值。



w3school

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

资源 在线测试 源代码

GPU云服务器云服务器 position，css position属性，css 迷惑性 position()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54315.html

css 迷惑的position

摘要：相对于定位以外的第一个父元素进行定位，即相对于第一个非处于正常流的父元素定位，现在我们将设置为，并且向下移动像素。生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过以及属性进行规定。规定应该从父元素继承属性的值。迷惑的position 小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑...

tianren124 2019-08-30 13:02 评论0 收藏0
CSS教你玩转背景background-position（1）

摘要：在页面构建时，刚入门的前端小狮子们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小，是非常直观的一种控制方式，如上图，我在HTML页面构建时，刚入门的前端小狮子?️ 们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又...

tyheist 2019-08-02 15:57 评论0 收藏0
CSS教你玩转背景background-position（1）

摘要：在页面构建时，刚入门的前端小狮子们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小，是非常直观的一种控制方式，如上图，我在HTML页面构建时，刚入门的前端小狮子?️ 们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又...

xiguadada 2019-08-22 10:53 评论0 收藏0
CSS教你玩转背景background-position（1）

摘要：在页面构建时，刚入门的前端小狮子们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又开始装逼了首先决定背景图的有如下属性属性主要控制背景图片的大小，是非常直观的一种控制方式，如上图，我在HTML页面构建时，刚入门的前端小狮子?️ 们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又...

jay_tian 2019-08-29 13:09 评论0 收藏0
别再被各种单位迷惑：px/em/rem

摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...

teren 2019-08-28 18:26 评论0 收藏0