html 元素定位position-relative, absolute, fixed, static
看到这个,你有什么想法?
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 left
, top
, right
and bottom
rules:
Relative positioning allows you to specify a specific offset (left
, top
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的更多相关文章
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css的定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- 对于position:relative,absolute,fixed的见解:
1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- 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
- (转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
- 网页元素定位Position
第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位 (一般不用) stati ...
随机推荐
- 写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度
import java.util.Scanner; /** * [程序38] * * 题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. * * @author Jame ...
- java 数据库
1.数据的概述 数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的的原始素材. 数据是信息的表现形式和载体,可以是符号.文字.数字.语音.图像.视频等.数据和信 ...
- Angular缺少 FormsModule
虽然 ngModel是一个有效的 Angular 指令,不过它在默认情况下是不可用的. 解决方法: 在根模块引入FormModule import { FormsModule } from '@ang ...
- HNOI2006 潘多拉的盒子
题目描述 题解: 题目的描述比较长,理解起来也有一定难度.仔细读题后我们发现整个任务可以分成两个部分:找出咒语机之间所有的升级关系.求最长升级序列. 1. 求升级关系: 容易看出,咒语机i可以抽象成一 ...
- (12) OpenSSL主配置文件openssl.cnf
1.man config 该帮助文档说明了openssl.cnf以及一些其他辅助配置文件的规范.格式及读取方式.后文中的所有解释除非特别指明,都将以openssl.cnf为例. [root@local ...
- Tiny4412 U-BOOT移植(转)
http://blog.csdn.net/eshing/article/details/37520291(转) 一.移植前说明: 1. 特别声明:此文档是我的学习文档,里面肯定有错误地方,仅供参考! ...
- python基础知识05-控制流程
控制流程 1.条件判断 python中的代码从上到下执行. if 条件: 缩进 语句1 elif 条件2: 缩进 语句2 (…或者写pass关键字.不写任何代码的时候,防止报错.) ... else: ...
- day15-python之变量和递归
1.局部变量与全局变量 #!/usr/bin/env python # -*- coding:utf-8 -*- # name='lhf' # def change_name(): # global ...
- 【02】使用Firebug查看和编辑HTML和CSS
使用Firebug查看和编辑HTML和CSS 描述 在本章节的教程中,我们将讨论如何使用Firebug查看和编辑HTML和CSS. 使用Firebug查看和编辑HTML 在你要查看的元素上右击鼠标然后 ...
- 国内UED收录
腾讯 腾讯CDC http://cdc.tencent.com/ CDC(Customer Research & User Experience Design Center)腾讯用户研究与体验 ...