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属性" ...Float 和 Position 属性是 CSS 中两个非常重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。但是,使用这些属性需要非常小心,因为它们可以对布局产生非常大的影响。
在CSS布局中,`position`和`float`是两个至关重要的属性,它们分别提供了不同的定位方式,用于控制网页元素在页面上的布局。本篇文章将详细阐述这两个概念以及它们的使用方法。 首先,我们来了解`position`定位。`...
有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...
总结来说,通过巧妙地结合`float`和`position:relative`,我们能够有效地解决IE6和IE7浏览器中元素居中对齐的问题,而无需使用可能导致兼容性问题的`display:inline-block`。这种方法虽然在某些情况下可能需要额外的...
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 ...1.任何申明为 float 的元素自动被设
总之,floatbox插件是实现层固定效果的一个高效工具,它以简洁的API和丰富的功能,使得网页设计师和开发者能够快速、便捷地创建出吸引人的浮动元素。无论是提升网站导航体验,还是优化广告展示,floatbox都能提供...
本文将深入探讨两种主要的定位方式:float浮动和position定位。 一、float浮动 1. **文档流**:在HTML中,元素默认按照文档流进行排列,即从左至右,从上至下。**脱离文档流**意味着元素不再遵循常规布局,而是...
相信很多人都有这样的问题,在页面布局中float和position:absolute哪个更好用呢?既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。而position,定位,是不受约束的,这个...
浮动(float)和定位(position)是CSS布局中的两个关键概念,它们在网页设计中扮演着重要角色,用于控制元素的位置和排列方式。 一、浮动(float) 浮动最初设计的目的是为了实现文本环绕图片的效果,但后来发展成为一种...
while (reader.BaseStream.Position ) { float value = reader.ReadSingle(); Console.WriteLine(value); } } } } ``` `BinaryReader.ReadSingle()`方法读取并返回文件中的一个float值。 5. **JavaScript ...
### div的position属性详解 ...总结而言,`div`的`position`属性提供了多种布局方式,包括流动模型、浮动模型以及层模型中的绝对定位、相对定位和固定定位,它们分别适用于不同的场景,可以根据实际需求灵活选择使用。
在本篇关于“three.js 入门三:buffergeometry贴图属性(position、index和uvs)”的文章中,我们将深入探讨如何使用three.js库在3D场景中应用纹理贴图,特别是关注BufferGeometry对象中的关键属性。BufferGeometry...
iOS 之关于 double/float 数据计算精度问题详解 iOS 开发中,double 和 float 数据类型的计算精度问题是一个常见的问题。本篇文章将详细介绍 iOS 中 double/float 数据计算精度问题的根源、解决方案和高精度计算...
在这种情况下,position属性提供了一种更为灵活的定位方式,可以用来替代部分float属性的使用。 在CSS中,position属性有五个可能的值:static、relative、absolute、fixed和sticky(后者不是本文讨论的重点)。每...
在CSS布局中,`position:relative`和`overflow:hidden`是两个非常重要的属性,它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先,我们来看`...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer(IE)浏览器中,开发者遇到的一个与HTML表格(table)的定位(position)属性和下拉选择框(select)相关的bug。...
这些话题涉及JavaScript操作CSS属性、CSS定位机制以及`float`和`position`属性的用法,都是前端开发中至关重要的知识点。 总结来说,实现`float:center`需要巧妙地结合`position:relative`、`left`、`right`属性,...