CSS中的几种定位简介

相对于元素在正常情况下出现在页面文档流的位置,CSS提供了几种方法来定位。

静态定位(static)表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化;

相对定位(relative)将移动元素盒,但是它在文档流中的原始空间会保留下来;

绝对定位(absolute)是指元素盒彻底从文档流中脱离出来,并相对于其容器块进行定位。因为这些元素从文档流中脱离出来,所以它们不再影响周边元素的布局,并且它们占据的空间不被保存;

固定定位(fixed)与绝对定位类似,元素从文档流中脱离,但是它们不是相对于容器块定位,而是相对于视口(viewpoint)定位(大多数情况下,这个视口就是指浏览器窗口)。

元素的容器块:

  1、根元素(html)创建的容器块叫做“初始化容器块”(有些浏览器将初始化容器块放在body元素)。初始化容器块的长方形盒子填充了浏览器窗口视口的大小。如果没有其他容器块,CSS就使用初始化容器块;

  2、对于被设置为静态或者相对定位的非根元素,容器块是它最近的块级元素、表格单元的内容区的边缘;

  3、对绝对定位的非根元素,容器块是它最近的不是静态定位的祖先元素。

相对定位元素有如下几个基本特征:

  1、使用CSS样式规则{position:relative;}声明;

  2、使用一到多个偏移属性(top、right、bottom、left)相对于它们在正常文档流中的初始位置进行定位。没有设置偏移属性的,默认被设置为auto;

  3、在文档流中所占据的原始空间被保留;

  4、可能会覆盖其他元素。

绝对定位元素有如下几个基本特征:

  1、使用CSS样式规则{position:absolute;}声明;

  2、使用一到多个偏移属性(top、right、bottom、left)相对于其容器块的边缘进行定位。没有设置偏移的,默认被设置为auto。偏移值应用于元素盒的外边缘(如果有margin值的话,就包括margin值);

  3、绝对定位的元素完全从文档流中脱离出来。该元素在正常文档流中所占据的空间不保留,并且它不再影响其他元素(例如,文本不会围绕它)。

  

时间: 2024-10-16 23:25:43

CSS中的几种定位简介的相关文章

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

CSS中position属性三大定位方式讲解

Relative Relative的元素相对于它原本的位置来做定位,但是它的位置仍然存在,即使它作了偏移,它周围的元素也不会占领的它的位置.所以,Relative属性的盒子会覆盖其他的盒子,而不是推开其他盒子. 如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置). 如果同时声明top和bottom的值,那么top值的优先级更高.如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语).比如,

《转载》CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. 首先,创作人员(author’s style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent’s style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一

CSS中的三种样式来源:创作人员、读者和用户代理

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式. 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件

CSS中的三种选择器

第一种:标签名选择器 格式:标签名{                    属性一:属性值:                    属性二:属性值:                    ...               }      例子:第一步:div{ background-color:#00ff00; font-size:20px;                 } 第二步:<div> 第二种方式</div > 第二种:类名选择器 格式:.类名{ 属性名:属性值; 属性

【转】HTML中的几种定位方式

http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方.所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果. 一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式.除非你想覆盖从父元素继承来的定位系统. 2,rel

CSS中背景background-position负值定位深入理解

下面是我要用到的一个背景图: 代码如下: 1.<style type="text/css"> <!-- .style1,.style2,.style3{ float:left; width:162px; height:162px; background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat; border:1px dotted #999999; col

css中的position(定位)

一.position语法与结构 position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过css z-index属性定义.此时对象不具有边距,但仍有补白和边框relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中

CSS布局的四种定位方式

1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对定位): 定位为relative的元素脱离正常的文本流,但其在文本流中的位置依然存在,所以它本身并没有脱离文档流. 通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级. <style type="text/css"