1. position:static
所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。
一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。
2. position:relative
如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】
元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
3. position:absolute
当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。
绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
4. position:relative + position:absolute
如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,物可能是BODY或 HTML 元素)。对于被浮动的元素,我们要时刻注意几点:
(1)元素被浮动后,浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来。
(2)虽然已经从普通文档流中脱离出来了,但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它,就像对一张图片浮动后,其他文字要围绕着它一样。
(3)浮动元素的margin不会出现margin-collapse现象。
(4)如果你要对一个nonrepeacted元素要应用float,那么你必须要为其指定width。在CSS说明书中,我们可以得知,如果不为nonreplacted元素指定width,那么浏览器会以最小宽度 (一个字符的宽度)显示该元素。对于replaceted元素(如image,input),我们是不需要指定width就可以为它浮动的。
(5)任何被float的元素,都会生成一个block box。比如,对于Inline元素,本应该生成的是inline box,但是一旦它被浮动,它就会和box leave元素一样,生成block box。所以任何要被浮动的元素,我们无需再为他display:block。因为这是多此一举。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
相关推荐
vue-float-menu根据菜单的位置找到最佳的菜单方向。 例如,如果菜单位于底部边缘且方向设置为bottom ,则组件将自动将方向翻转至top 。 这是一个将菜单的默认位置设置为top left的基本示例。 < float-menu ...
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 家庭作业-您应该使用在上一堂课中学到的工具,字体,位置,浮点数(网格系统),图标,文本属性等来创建此模板(下面的模板链接),我将检查每个细节...
bower install ng-sticky-float-container 如何使用 包括ng-sticky-float-container.js文件 向模块添加依赖项,例如: angular.module('myApp', ['ng-sticky']) 用{position:fixed}来放置您的容器! 使用固定...
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
1.Position、Float属性的基本使用方法2.Position、Float属性对元素所造成的影响3.Position、Float属性交叉使用上面的影响4.Position、Float属性使用上的小技巧 本文结构点: 1.HTML布局的基本要点(点我直接跳转) ...
#nav li,#nav li a { float:left; display:block; width:117px; height:38px; background:#fff; } #nav li a { width:100%; text-indent:-9999px; background:url(images/mac.png) no-repeat 0 0; } #nav .n01 { ...
有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...
本文详细介绍了CSS中position定位和float浮动的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
原文:http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。...
float:left; background: url(css-face.gif) no-repeat; } #face li#face1 { background-position:-22px -5px; } #face li#face2 { background-position:-104px -5px; } #face li#face3 { background-...
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 ...1.任何申明为 float 的元素自动被设
clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-bottom margin-left 轮廓 Outlines outline outline-color outline-style ...
float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...
##高仿微信主界面1,Fragment+viewpager+fragmentPagerAdapter 2,徽章查看3,界面切换时,演示画面 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) { Log.v(...
文章目录一、float浮动二、position定位 今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多。 一、float浮动 1、文档流 指的是元素排版布局过程中,元素...
div的position属性详细讲解 1.流动模型 (块元素,内联元素) 2.浮动模型 (float:) 块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。...
本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
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 ...
相信很多人都有这样的问题,在页面布局中float和position:absolute哪个更好用呢?既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。而position,定位,是不受约束的,这个...