http://www.cftea.com/c/2009/01/84CEP6T7Q4BYZ1OZ.asp
网上也早有关于 position 的讲解,我个人觉得写得不全面,所以我才在迟到的今天写下这篇文章。
position 有五个值:static、relative、absolute、fixed、inherit。
static
是默认值。就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static。
relative
没有脱离布局流,此时可以使用 top、right、bottom、left 属性。
top 和 bottom 共存时,使用 top 值,忽略 bottom 值;
left 和 right 共存时,使用 left 值,忽略 right 值;
relative 是相对位置,指相对于元素的 position 为 static 时的位置:
top 相对于 static 下移多少像素(若 top 是负值,则上移)。
right 相对于 static 左移多少像素(若 right 是负值,则右移)。
bottom 相对于 static 上移多少像素(若 bottom 是负值,则下移)。
left 相对于 static 右移多少像素(若 left 是负值,则左移)。
使用 relative 之后:
原来的空间不会被其他元素挤占。
元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
absolute
脱离布局流,此时可以使用 top、right、bottom、left,但这些属性不再是相对于 static 时的位置,而是相对于 containing block 的,相对于其边框内边缘的,而不是其 padding 内边缘。
使用 absolute 之后:
原来的空间会被其他元素挤占。
元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
fixed
它的模式与 absolute 相同,不过无论怎么拖动滚动条,它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性;在 IE7 中支持这个属性但需要指明 DOCTYPE;Firefox 等浏览器支持这个属性。
top、right、bottom、left 属性指相对于视口的。
inherit
继续父元素的 position 值。
名称解释
视口-通过解析文档,连续媒体(比如屏幕就是连续媒体,而打印机则是基于页的媒体)给用户产生一个视口(一个窗口或其它在屏幕上显示的区域)。
总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。
分享到:
相关推荐
小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:...
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...
实现div居中的方法有很多,本例介绍的使用css中position:fixed来实现div的上下左右居中,下面以一个DIV 元素在浏览器窗口居中为例
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id=main> ...方法一: #main{ position: relative; //在父元素中使用相对定位 width: 200px; height:
效果描述: 首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position... 使用方法: 给你需要居中的div的父辈div增加附件中关键样式即可
关键是当浏览器屏幕滚动时,该对象div层要移除浏览器界面视区的时候,是要修改它的position属性,让它浮动在窗口的上沿显示就行了。最好的position属性是fixed,可以在IE6+和其他浏览器浮动层平滑的固定定位,由于IE...
position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 <div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div> </div> 1. relative relative属性相对比较简单,...
如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。 absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于...
第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.1.1 将页面用div分块 11.1.2 设计各块的位置 11.1.3 用CSS定位 11.2 固定宽度且居中的版式 11.2.1 方法一 11.2.2 方法二 11.3 左中右版式...
在其它版本我们测试的position:absolute属性都是正常显示,但是ie6下显示的却为空。 解决方法如下: 只需要在浮动层的下方或上方加上一个空的div即可。例子如下。 复制代码代码如下: /**浮动层**/ <div class=”...
position-sticky position: sticky; Polyfill position: sticky; . 用法 加载position-sticky.min.js 。 < script src =" dist/position-sticky.js ... 要用作 Web 组件扩展,请将is="position-sticky"为<div> 。
强大的时候,对于div中的一些小物件不方便使用margin或者padding的时候,给与position:absolute;再配备left、right、top和bottom,基本上就是想放哪里放哪里了。 让人无奈的时候,就是我们一旦滥用了position这个...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
如果有一个元素div ,他的position属性设置为absolute,那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、或者fixed,那么这个...
在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。 position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。最后将会介绍...
本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法。分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来...
使用CSS样式”position:fixed”可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了。有时候我们希望当...
定位的话肯定就需要position,首先将数字的div的position设置为absolute,有一种层的感觉,因为此时的数字的position的父标记是body所以设置top和left的时候也可以设置到和购物车想要的位置,不过将购物车的margin...