看到这个,你有什么想法?

Difference between static and relative positioning

如果你能完全看明白,那几本上css 元素定位的东西基本都会了。本文也不用往下看了。

自己接触web这么多年,虽说前端有接触过,但还是没有系统地学习过,和完整的实践过。很多东西是似懂非懂。其实这里就是问题的关键所在。

似懂非懂,其实本质上是不懂的。但是却又自以为懂, 这就是自己给自己设定了个障碍,这个障碍看似无形却比有形的障碍更可怕。因为每个人似乎

总是自以为是的认为自己认定的东西就是对的。因此很难,放空或者说归零, 来从头开始系统完整的学习一个新的东西。造成对新事物的理解总是停留

在陈旧的水平,故步自封。否定也许是进步的开始!!

------------------------------------------------------------------------------------------------

Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey lefttopright and bottom rules:

Relative positioning allows you to specify a specific offset (lefttop etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:

There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:

And when a position: relative is applied to a parent element in the hierarchy:

Note how our absolutely-position element is bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:

Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:

..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

With absolute positioning and fixed positioning, the elements are taken out of HTML flow.

html 元素定位position-relative, absolute, fixed, static的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  3. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  4. CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

  5. 对于position:relative,absolute,fixed的见解:

    1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...

  6. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  7. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  8. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  9. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  10. 网页元素定位Position

     第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) stati ...

随机推荐

  1. 写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度

    import java.util.Scanner; /** * [程序38] * * 题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. * * @author Jame ...

  2. java 数据库

    1.数据的概述 数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的的原始素材. 数据是信息的表现形式和载体,可以是符号.文字.数字.语音.图像.视频等.数据和信 ...

  3. Angular缺少 FormsModule

    虽然 ngModel是一个有效的 Angular 指令,不过它在默认情况下是不可用的. 解决方法: 在根模块引入FormModule import { FormsModule } from '@ang ...

  4. HNOI2006 潘多拉的盒子

    题目描述 题解: 题目的描述比较长,理解起来也有一定难度.仔细读题后我们发现整个任务可以分成两个部分:找出咒语机之间所有的升级关系.求最长升级序列. 1. 求升级关系: 容易看出,咒语机i可以抽象成一 ...

  5. (12) OpenSSL主配置文件openssl.cnf

    1.man config 该帮助文档说明了openssl.cnf以及一些其他辅助配置文件的规范.格式及读取方式.后文中的所有解释除非特别指明,都将以openssl.cnf为例. [root@local ...

  6. Tiny4412 U-BOOT移植(转)

    http://blog.csdn.net/eshing/article/details/37520291(转) 一.移植前说明: 1.  特别声明:此文档是我的学习文档,里面肯定有错误地方,仅供参考! ...

  7. python基础知识05-控制流程

    控制流程 1.条件判断 python中的代码从上到下执行. if 条件: 缩进 语句1 elif 条件2: 缩进 语句2 (…或者写pass关键字.不写任何代码的时候,防止报错.) ... else: ...

  8. day15-python之变量和递归

    1.局部变量与全局变量 #!/usr/bin/env python # -*- coding:utf-8 -*- # name='lhf' # def change_name(): # global ...

  9. 【02】使用Firebug查看和编辑HTML和CSS

    使用Firebug查看和编辑HTML和CSS 描述 在本章节的教程中,我们将讨论如何使用Firebug查看和编辑HTML和CSS. 使用Firebug查看和编辑HTML 在你要查看的元素上右击鼠标然后 ...

  10. 国内UED收录

    腾讯 腾讯CDC http://cdc.tencent.com/ CDC(Customer Research & User Experience Design Center)腾讯用户研究与体验 ...