`
weiqingfei
  • 浏览: 312725 次
  • 性别: Icon_minigender_1
  • 来自: 黑洞
社区版块
存档分类
最新评论

关于position和float

    博客分类:
  • CSS
阅读更多

 position有四种值:static, relative, absolute, fixed.

其中staic是默认值,并且static和relative是在文档流里占据位置的。

static无法设置top,left属性

relative设置的top,left属性是相对于自己在文档流里的位置的偏移。

 

absolute和fixed并不占据文档流。

absolute会在其祖先里找第一个不是static的控件,以它的位置为参考,设定top,left,如果没找到,那么就以body基准。

fixed是绝对的以可见区域为基准设定偏移位置。

 

float本身也不存在于文档流里,它实际上是对布局的一种trick,包括后来的inline-block,css3里慎用。

当float和position混用时,只能指定static和relative,如果指定了absolute或者fixed,float的设定将无效。

分享到:
评论

相关推荐

    float与position属性

    CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

    CSS的position定位和float浮动详解

    本文详细介绍了CSS中position定位和float浮动的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧

    浅谈CSS中display/float/position属性值的相互影响

    有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...

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

    2.Position属性(点我直接跳转) 属性值介绍 用法介绍 一些关于position的小知识 3.Float属性(点我直接跳转) 属性值介绍 用法介绍 与Position之间的兼容问题 HTML布局的基本要点: 如果要掌握、运用好...

    css(display,float,position)深入理解

    display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 ...1.任何申明为 float 的元素自动被设

    html之CSS设计(float定位和position定位详细分析)

    今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。 一、float浮动 1、文档流 指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。...

    详细分析css float 属性以及position:absolute 的区别

    相信很多人都有这样的问题,在页面布局中float和position:absolute哪个更好用呢?既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。而position,定位,是不受约束的,这个...

    理解CSS浮动float、定位position

    本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

    div的position属性

    相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。 如下代码实现相...

    如何用float配合position:relative实现居中

    今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块...关于position:r

    Cg编程,geometry_program

    TRIANGLE void fins_gp(AttribArray<float4> pos : POSITION, AttribArray<float3> normal : TEXCOORD1, AttribArray<float3> tangent : TEXCOORD2, uniform float2 scale = { 1.0, 1.0 }, uniform float4x4 ...

    position替代部分float进行网页元素定位

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位,每一种都有可能是前端爱好者的所喜欢的,本文讲解position 属性值的含义以及为什么使用定位,需要的朋友可以参考下

    position图片定位

    float:left;} .bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;} .bg p{display:none;width:226px;height:226px;...

    CSS 定位之position全面了解

    在前端网页布局中,在同一平面上布局,我们大都采用float属性来定位网页元素的位置。但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position...

    cg for lighting program

    void C5E2v_fragmentLighting(float4 position : POSITION, float3 normal : NORMAL, out float4 oPosition : POSITION, out float3 objectPos : TEXCOORD0, out float3 oNormal : TEXCOORD1, uniform float...

Global site tag (gtag.js) - Google Analytics